グリッドフィールドの複数の列の管理

いくつかの列(おそらく5つ以上)でグリッドフィールドを設定する必要があります。このフィールドが[公開]ページに表示されると、ユーザーが非常に広いブラウザウィンドウ(当然想定できません)を持たない限り、列は非常に狭くなります。誰かがこの問題を軽減するためのアドオンやその他の方法を知っていますか?おそらく、パーセント値ではなくピクセル単位で列のサイズを設定し、グリッドフィールドを公開ページで横にスクロールできるようにします定義されている?

3

1 答え

If you'd rather give Grid tables a fixed width so that the individual columns don't get compressed, you can add your own CSS rule using override.css.

table.grid_field {
    width: 1500px !important;
}

これは、画面幅が十分ではない水平スクロールバーを強制し、グリッド列の幅を適切に保ちます。

これをグローバルに行うのではなく、特定のグリッドフィールドをターゲットにする方が便利です。 #field_id_63 table.grid_field のようなfield_id特有のセレクタを使用することができます(field_idを書き留めるか、Webインスペクタを使用して見てください)。

override.cssの代わりに、フィールド指示にスタイルタグを置くこともできます。

更新:

グリッドフィールドをページの外側に張り出さないようにするには、 .grid_field_container_cell overflow:scroll; を設定します。公開フォームでは、まだ水平スクロールバーを与えます。

table.grid_field_container td.grid_field_container_cell {
    overflow: scroll;
}
2
追加された
ああ、はい。より一般的な宣言には、おそらく重要なが必要なのでしょうか(私の回答は更新されました)、これがトリックでした。
追加された 著者 Matt MacLean,
Rick、グリッドフィールドのコンテナエレメントに overflow:scroll を設定することで、これをより洗練させることができるとわかった後、私の答えを更新しました。これにより、幅広い固定幅のグリッドフィールドがパブリッシュフォームに含まれますが、それでも水平スクロールバーが得られます。
追加された 著者 Matt MacLean,
それは素晴らしいアレックス、ありがとう。実際には、あなたの2番目の例のようにフィールドIDを含めない限り、CSSを取得することができませんでした。よりグローバルなセレクタ(フィールドIDなし)はCPで認識されませんでした。フィールド指示のスタイルタグも機能しました。グリッドフィールドがCP内の収容ボックスからはぎ取られ、ブラウザウィンドウのスクロールバーが使用されるのは残念です。 {{b> within } というフィールドがフィールド列を定義しているときのようにスクロールすることを期待していました。どんなに。それはやや醜い解決策ですが、解決策です。乾杯。
追加された 著者 Brett Veenstra,
ああ、これらの調整の両方は、アレックスの扱いになります、ありがとう。
追加された 著者 Brett Veenstra,