Activities
latest
false
Scrolling through Data Grids - Other latest
Banner background image
logo
Workflow Activities
Last updated 23 févr. 2024

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;
    }.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.



Support and Services icon
Get The Help You Need
UiPath Academy icon
Learning RPA - Automation Courses
UiPath Forum icon
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.