How to change the default datagrid height?

[sampannemans]

Hello,

When using the new datagrid element, there seems to be a default grid height even when the height is set to ‘auto’.

Is there a way to make it fit better if there are only one or two rows in the datagrid?

Appreciate your help!

[Agustin_Carozo (Agustin M. Carozo)]

Hi Sam

Can you check you have modified the “Vertical padding scale” setting, that’s another way to change the row size.

[sampannemans]

Hi Augustin,

Thanks for your reply. The vertical padding is set to 0. I notice that the vertical padding changes the individual rows, but not the entire datagrid’s height.

Is there another way to make the datagrid fit the data rows even if there are only 1 or 2 rows?

Thanks!

[Mael]

Hello @sampannemans,

It’s a default configuration of AG-grid (the library we are using)

You can force the min-height yourself with two ways:

1. In More / Custom code: It will only work in your published app and for the datagrid of your app

2. With an HMTL element in your page: It will work in your editor and in the published app. But only for the page where there is the HTML element

In both case, you can use this code

.ag-center-cols-viewport {
    min-height: unset !important;
}

[sampannemans]

Thanks so much!

[RichardEdward44 (Richard)]

You’re right—AG-Grid does apply a default height even when set to ‘auto’. A quick fix is to manually set a smaller min-height using custom code, especially if your grid only has one or two rows. That way, it fits your content better and avoids the empty space. Hope this helps!

[sampannemans]

Yes, I added the custom code to unset the min-height. That works fine!
Thanks