データグリッドコンポーネントをスクロールする

作成するデータグリッド内に 12 個を超えるテキストフィールド コンポーネントが含まれていると、データグリッドの幅が狭すぎて内容が表示されません。このチュートリアルでは、データグリッドをスクロールする方法を説明します。

チュートリアル

データグリッド コンポーネントをスクロールするには、以下の手順を実行します。

2 つのクラスを含む CSS ファイルを作成します。1 つはデータグリッドをスクロールするためのクラスで、もう 1 つはテキストフィールド コンポーネントの幅を広げるためのクラスです。overflow-x: scroll プロパティを設定すると、データグリッドをスクロールできます。min-width: 300px プロパティを設定すると、テキストフィールドを拡大してその内容を表示できます。

次のコードをコピーして CSS ファイルに貼り付けます。
```
.my-data-grid
{
   overflow-x: scroll;
}
 
 
.my-data-grid input 
{
   min-width: 300px;
}.my-data-grid
{
   overflow-x: scroll;
}
 
 
.my-data-grid input 
{
   min-width: 300px;
}
```
[フォームを作成] アクティビティの [ローカル CSS ファイルパス] プロパティに、作成した CSS ファイルのパスを入力します (例: "/file://C:/User/theCssFile.css")。

ローカル CSS ファイルへのパスを変数として保存し、[ローカル CSS ファイルパス] フィールドにその変数名を入力することもできます。

3. データグリッド コンポーネントの [表示] タブに移動します。4. [カスタム CSS クラス] フィールドに、ファイルで設定したカスタム CSS クラスの名前を入力します (例: my-data-grid)。これにより、CSS ファイル内のデータがフォームにバインドされます。