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

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

1. データ グリッドを追加するフォームの [プロパティ] パネルに移動します。
2. [カスタム CSS] フィールドに、次の CSS クラスを入力します。

   .my-data-grid
   {
      overflow-x: scroll;
   }
    
    
   .my-data-grid-input 
   {
      min-width: 6000px;
   }

   overflow-x: scroll プロパティを使用すると、データ グリッドをスクロールできます。min-width: 300px プロパティを設定すると、データ グリッド内の [テキスト フィールド] を拡大してその内容を表示できます。
   
   

   

   
   
3. フォーム内に [データ グリッド] コンポーネントを追加します。
4. [表示] タブの [カスタム CSS クラス] フィールドに、カスタム CSS クラスを追加します。間に単一スペースを入れて、両方のクラスを追加します。
   
   

   

   
   

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

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