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 upto 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

So , someone please help me on this. Is there any way to give horizontal scroll bar or customize the each column width using form.io ?

Thanks in advance

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