I’m struggling trying to figure out how to make my forms expand vertically and not show a scrollbar.
I have 3 css position layout forms with some labels/buttons on the top and a grid at the bottom. The grid is set at a specific top position and anchored to the sides and bottom so it expands with the form.
The main form is a responsive form with an outer div (container-fluid) with 3 rows, each having an internal div (col-md-12) with the one of the 3 css position forms inside.
I want the 3 rows height to be dynamic so if there are no rows in the grid the div will be short, and if the grid has a lot of rows (shouldn’t be any more than 50-100) the div will expand so it won’t scroll.
The scrolling should take place on the outer div (container-fluid). I’ve tried multiple options of div layouts and can’t find the right setup.
Thanks for the example Seain. I noticed that you used a data grid, I am currently using the old Table (Servoy Extra Components). When I set the responsive height on this table to -1 it doesn’t seem to change anything. My table is also on a css position form vs a responsive, not sure if that makes a difference.
Should the old Table component on a css position form be able to work the same as the way your example works? If not I may just rebuild the 3 forms.
I rebuilt my form and it’s working fine now. One thing I did notice is that the data grid doesn’t seem to handle dynamic row height. Thanks for the help Seain.
That is a column setting. To allow the column to auto resize, on the column set the properties columnDef.autoHeight = true and columnDef.wrapText = true.
Also, if you want to allow users to edit the field you can make the experience nicer by using the agLargeTextCellEditor.