Trelloでリストの列幅を変更するにはどうすればよいですか？

Trelloでリストの列幅をどのように変更しますか？

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:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

私にとって、300pxを追加すると、Full-HD-Displaysの方がはるかに良く見える

Trelloはボードリストのレイアウトを display: flex代わりにdisplay: blockようになったため、であるため、widthツイストはもう機能しません。

また、Trelloテントは、作成されたすべての新しいカードにスタイルを挿入することに注意してください。したがって、オブザーバーを作成し、ページの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});

私の現在のボードには多くのリストがあり、タイルのほとんどすべてがカードの幅の約75％だったので、リストを狭くしようとしましたタイトルがカードの幅の50％未満のもの）。

ここで提案したJSスクリプト（最新のものではありません）を試してみましたが、実際にリストを狭くしましたが、それらの間に新しく形成されたギャップは削除されませんでした。だから、私はこのプリミティブを思いついたが、それを行う「トリックを行う」方法：

1. 希望のリスト幅が得られるまでCtrl + '-'を押します（おそらくすべてのリストが画面に収まるときです）
2. 今はおそらくテキストがかなり小さいので、要素インスペクターを開いて.list-card-titleのcssを編集し、フォントサイズを大きくします（「font-size：large;」を追加しました。これで十分のようです）。
3. （オプション） 'g'sなどが下部にない場合は、数ピクセルの下部パディングを追加します（10を追加しました）。

リストの幅を増やしたい場合は、反対の操作（テキストの拡大と縮小）が機能する場合があります。

前に言ったように、これはおそらく物事を処理するための「適切な」方法ではありませんが、それは私が望む結果を得て、それは迅速です。

これは利用可能なオプションではないため、Trelloの列の幅は固定されています。

Webストアで、「Trelloのスリムリスト」というChrome用のアドオンが利用可能になりました。

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

1. Pro4Trello Free Chrome拡張機能をダウンロードする

2. 「カスタムCSSを適用」にチェックマークを付けて、これを追加します。

   .list {
     width: 375px;
   }
   
   .list-wrapper {
     width: 375px;
   }
   

Firefoxには、Trello Super Powersというアドオンが追加されました。