Dynamic Grid Height Without Vertical Scrollbars

Questions
1

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.

CSS Position Form:

image
image866×170 12.1 KB

Main/Responsive Form:

image
image222×195 2.57 KB

If this can be done better with a different type of main/outer form, I’m willing to change it.

TIA

2

The three grid forms should be responsive like the container.

On each datagrid set responsiveHeight = -1.

Here’s an example solution (2025.03):

1 Like
3

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.

image
image403×625 9.74 KB

4

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.

5

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.

columnDef = {
   "autoHeight": true,
   "cellEditor": "agLargeTextCellEditor",
   "wrapText": true
}
6

Thanks for the additional info, the row and grid heights are now both working well.