Single row in ag-grid using autoHeight has extra space after row

Question

I'm using ag-grid in an angular project and I'd like to use autoHeight. When there is only one row in the grid, there is space below the row inside the grid. grid with single row and extra space

When a second row is added, autoHeight works fine and does not display the extra space. grid with two rows and no extra space

I can remove the space by manually setting the height when there is a single row

this.systemOptions.length === 1 ? this.gridApi.setDomLayout() : this.gridApi.setDomLayout('autoHeight');

but I would prefer to use autoHeight for any number of rows. Is there a way to display a single row using autoHeight without the extra space below the row?

Answer 1

Here is what the documentation says, but I have altered the code from unset to 40 as this worked for me and it really looks weird without min-height.

When using Auto Height, there is a minimum of 150px set to the grid rows section. This is to avoid an empty grid which would look weird. To remove this minimum height, add the following CSS:

.ag-center-cols-clipper {
    min-height: 40 !important;
}

Source: https://www.ag-grid.com/javascript-data-grid/grid-size/