如何在Trello中调整列表的列宽大小？

#1 楼

在Trello的当前实现中，这是不可配置的：列表的编程大小介于300-210像素之间，具体取决于可用空间。您可以使用一些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)

（用您自己想要的像素宽度替换500。）

您可以在浏览器的控制台上执行此操作，或将其保存为以下书签，以便在需要更多宽度时单击：

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

编辑：书签的另一种选择要求您实际所需的大小是：

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

它不会验证答案，因此，如果输入的不是数字，将无法使用。

这很棒！您是否可以通过javascript提示输入数字，以便用户在单击书签时立即做出决定？

– Alpha
2012年10月17日，1：11

确定：将500替换为：hint（'List width？'，'500'）。

– Pi Delport
2012年10月19日9:49

谢谢，希望您不要介意，但我也将其添加到您的答案中，以使其更加完整。

– Alpha
2012年10月19日13:10

对bookmarklet代码进行较小的更新：卡片本身未调整大小（它们的宽度使用.list-card类的max-width css属性限制为300px）。 javascript：（function（w）{$（'。list-card'）。css（'max-width'，'none'）; $（'。list'）。width（w）; $（'。list- area'）。width（$（'。list'）。length *（w + 12））; $（'body'）。addClass（'layout-horiz-scroll'）;}）（提示（“列表宽度？ “，500））

– Antonlitvinenko
13-10-24在2:28

一个更简单的书签，可在2016年12月2日使用：javascript javascript：（function（）{$（'。list-card'）。width（'490px'）; $（'。list-wrapper'）。width（'500px '）; $（'。list-card'）。css（'max-width'，'470px'）;}）（）;

– jmgarnier
16 Dec 2'在20:31

#2 楼

要扩大显示卡的细节，可以使用以下书签脚本：

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

对我来说，在全高清显示器上添加300px看起来要好得多

#3 楼

这是一个略作更新的答案，因为Trello现在将板列表设置为display: flex而不是display: block，所以width的扭曲不再起作用。已创建新卡。因此，最好创建一个观察者并监视页面的所有DOM更改，并始终实施样式更改。

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});

#4 楼

我试图缩小列表的范围，因为我的当前董事会有很多，而且对于几乎所有董事会而言，图块约占卡宽度的75％（实际上，我认为如果我只计算一下，我仍然可以获得多数席位）标题小于卡宽度的50％的标题。）

我尝试了此处建议的JS脚本（虽然不是最新的），但确实确实使列表变窄了，但并没有。消除它们之间新形成的间隙。因此，我想出了这个原始方法，但是“确实做到了”：按Ctrl +'-'直到获得所需的列表宽度（这可能是因为列表适合屏幕）
现在文本可能很小，因此打开元素检查器并编辑.list-card-title的CSS并增加字体大小（我添加了'font-size：large;'和
（可选），如果您看到'g'并且缺少其下部，则可能需要添加一些底部填充像素（我添加了10）。

如果您想增加列表宽度，则相反的方法（放大并缩小文本）可能会起作用。

正如我之前说过的那样，这可能不是处理问题的“正确”方法，但是它使我我想要的结果，而且很快。

#5 楼

这不是可用的选项，因此Trello中的列宽是固定的。

#6 楼

现在，网上商店中提供了一个用于Chrome的名为“ Trello的苗条列表”的附加组件： trello / pjlejgbmijmafmobaofcgblpdbkaodod

这如何解决问题？您至少可以链接到您推荐的工具吗？

–ale
15年5月12日在17:18

此扩展程序为我解决了问题。不赞成投票的人请重新访问，OP现在添加了一个链接，这是有用的答案。

– yoyo
18年4月10日在21:17

这只会减小宽度，对我来说似乎不是可配置的。

–volvox
18-10-5在17:56

#7 楼

下载Pro4Trello Free Chrome扩展程序

选择“应用自定义CSS”并添加以下内容：

.list {
  width: 375px;
}

.list-wrapper {
  width: 375px;
}

#8 楼

Firefox现在有一个附加功能：Trello Super Powers。

编程黑洞网