Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question

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').width(w);
    $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing
    $('body').addClass('layout-horiz-scroll');  // force-enable horizontal scrolling
})(500)

(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'). – Pi 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
1  
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'});
  })(newWidth);
}

enforceNewWidth();

var observer = new MutationObserver(function(mutations) {
  enforceNewWidth();
});

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

To make the card-details wider, you can use this bookmark-script:

javascript:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

For me, adding 300px looks a lot better on Full-HD-Displays

share|improve this answer

I was trying to make the lists narrower because my current board has lots of them and for almost all of them the tile was about 75% of the width of the card (in fact, I think I could still get a majority if I only counted the ones with titles less than 50% of the width of the card).

I tried the JS script suggested here(not the latest one though) and while it did indeed make the lists narrower it didn't eliminate the newly formed gap between them. So, I came up with this primitive but 'does the trick' way of doing it:

  1. press Ctrl + '-' until you get the desired list width (that's probably when all the lists fit the screen)
  2. by now the text is probably pretty small so open the element inspector and edit the css for .list-card-title and increase the font size ( I added 'font-size: larger;' and it seemed to be enough).
  3. (optional) if you see the 'g's and such missing their lower part you might want to add a few pixels of bottom padding (I added 10).

The opposite (Zoom in and shrink the text) might work if you want to increase list widths.

As I said before, this is probably not the 'proper' way of handling things but it got me the result I wanted and it's quick.

share|improve this answer

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

share|improve this answer

There is now an add-on for Chrome called "Slim Lists for Trello" available on the Web Store:

https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod

share|improve this answer
1  
How does this solve the problem? Can you at least link to the tool you're recommending? – Al E. May 12 '15 at 17:18

Your Answer

 
discard

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.