新しいサービス【AwesomeQR】

【フォームブリッジ】テーブル幅が長い時でもスクロールさせない方法

1 min 4,233 views
Kviewer用アイキャッチ画像

イメージ

今回は、フォームブリッジのテーブルを使用した際に、テーブルの項目が多くて、右にスクロールしてしまうのを解除する方法を備忘録として残しておきます。

まずは、どういう状態からどういう状態になるかのイメージをご覧ください。

Before
After

フォームブリッジは、特徴として、ラベルの長さに依存して各項目の幅がそれに合わせて横に長くなっていきます。

なので、それぞれの項目のラベルを折り返すように設定できれば、今回の意図は達成できます。

実装

さてさっそく実装していきます。

  1. STEP

    準備

    まず、準備として、テーブルの各項目の幅をフォームブリッジの設定で行っていきます。

    上図の横幅のところに、ピクセルか%で数値を設定していきます。

    この時、100%きれいに配置したい場合は、項目を足し合わせて100%になるときれいに並びます。

  2. STEP

    カスタマイズ

    続いて、以下のCSSを読み込みます。

    [data-vv-name="ここにフィールドコードを入力"] > table thead th{ 
        white-space: normal;
    }

    これでおしまいです。

さいごに

今後もちょっとしたTipsを随時アップできればと思います。

関連記事