datagridhorizontal-scrollingformioform.ioangular-formio

How to provide horizontal scroll bar for form.io data-grid component?

Using the form.io data-grid component, we can drag and drop our columns to that data-grid component.

For example, a simple data-grid component with two or three columns may look like below :

enter image description here

It is okay for less number of columns. If number of columns increases up to 6 or 7, the data-grid view in not okay. The columns gets shrink in size and data goes unreadable as below:

enter image description here

Is there any way to give horizontal scroll bar or customize the each column width using form.io?

Solution

  • Add absolute width for each component inside data grid in layout tab. enter image description here

    This will allow the data grid to have a horizontal scroll.

    enter image description here