Scrolling through Data Grids

When you create a Data Grid with more than 12 Text Field components inside of it, the Data Grid becomes too tight to display the content. This tutorial shows how to scroll through the Data Grid, and make the components inside of it wider, so the content becomes more readable.

1. Go to the Properties panel of the form where you want to add the Data Grid.
2. In the Custom CSS field, input the following CSS classes:

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

   The overflow-x: scroll property allows you to scroll through the Data Grid. The min-width: 300px property makes Text Fields inside a Data Grid larger, to display the content inside of them.
   
   

   

   
   
3. Add a Data Grid component into the form.
4. In the Display tab, add the custom CSS classes, inside the Custom CSS Class field. Add both classes with a single space between them.
   
   

   

   
   

The image below shows how a Data Grid with 12 Text Fields looks like.

Now you can compare it with the Data Grid below, after applying the custom CSS.