Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

How do you resize the column width of a list in Trello?

share|improve this question

3 Answers 3

In Trello's current implementation, this is not configurable: lists are programmatically sized to be between 300–210 pixels wide depending on the available space.

However, if you don't mind a bit of a hack, you can take matters into your own hands, with some JavaScript:

(function(w) {
    $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing
    $('body').addClass('layout-horiz-scroll');  // force-enable horizontal scrolling

(Substitute the 500 with your own desired pixel width.)

You can execute this at your browser's console, or save it as the following bookmarklet, to click whenever you want some more width:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)

Edit: Another option for the bookmarklet to request you the actual desired size is:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

It will not validate the answer, so if you enter something that is not a number it won't work.

share|improve this answer
This is great! Do you think you could make the number be entered through a javascript prompt so that the user gets to decide at the moment the bookmarklet is clicked? –  Alpha Oct 17 '12 at 1:11
Sure: Replace the 500 with something like: prompt('List width?', '500'). –  Piet Delport Oct 19 '12 at 9:49
Thanks, I hope you don't mind but I added that to your answer as well, to make it even more complete. –  Alpha Oct 19 '12 at 13:10
Minor update to the bookmarklet code: cards themselves were not resized (their width was capped at 300px with max-width css property on .list-card class). javascript:(function(w) { $('.list-card').css('max-width', 'none');$('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500)) –  antonlitvinenko Oct 24 '13 at 2:28
Minor update for the flex-basis: javascript:(function(w) { $('.list-card').css('max-width', 'none');$('.list').width(w);$('.list').css('flex-basis',w+'px'); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500)) –  Sean Oct 9 '14 at 14:51

This is an slightly updated answer as Trello now set the board list layout to display: flex instead of display: block, so the width twist won't work anymore.

Also, noted that Trello tents to inject the style to every new card created. therefore it could be a good idea to create a observer and monitoring any DOM changes of the page, enforce the style change taking place at all time.

var newWidth = 400;
var cardNewHeight = 40;
function enforceNewWidth() {
  (function(w) {
      $('.list').css({flex: '0 0 ' + w + 'px'});

      // updated 2015-04-01
      $('.list').css('max-width', w + 'px');

      $('.list-card').css('max-width', w + 'px');
      $('.list-card').css('min-height', cardNewHeight + 'px');
      // $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing    
      $('textarea.list-card-composer-textarea').css({width: (w - 40) + 'px'});


var observer = new MutationObserver(function(mutations) {

observer.observe(document, {childList: true, subtree: true});
share|improve this answer

This is not an available option and so the widths of columns in Trello are fixed.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.