ワークフローのアクティビティ

最終更新日時 2026年3月5日

データグリッドをスクロールする

[テキストフィールド] コンポーネントが 13 個以上あるデータグリッドを作成すると、データグリッドの大きさが足らず、すべての内容が表示されません。このチュートリアルでは、データグリッドをスクロールし、内部のコンポーネントの幅を広げて内容を読めるようにする方法を説明します。

データグリッドを追加するフォームの [プロパティ] パネルに移動します。
[カスタム CSS] フィールドに、次の CSS クラスを入力します。
```
.my-data-grid
{
   overflow-x: scroll;
}
 
 
.my-data-grid-input 
{
   min-width: 6000px;
}
.my-data-grid
{
   overflow-x: scroll;
}
 
 
.my-data-grid-input 
{
   min-width: 6000px;
}
```
[ overflow-x: scroll ] プロパティを使用すると、 データグリッドをスクロールできます。min-width: 300px プロパティを設定すると、データグリッド内の [テキストフィールド] を拡大してその内容を表示できます。
フォーム内に [データグリッド] コンポーネントを追加します。
[表示] タブの [カスタム CSS クラス] フィールドに、カスタム CSS クラスを追加します。間に単一スペースを入れて、両方のクラスを追加します。

以下の図は、12 個の [テキストフィールド] を持つ [データグリッド] の外観を示しています。

この下の、カスタム CSS を適用後の [データグリッド] と比較してみてください。

docs image

前へフォーム内で画像を表示する

次へフォームで開発者ツールを使用する