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
add comment

2 Answers 2

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'). –  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
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
add comment

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

share|improve this answer
add comment

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.