I am wondering if there is a way that the ag-grid can have a min height when using domLayout = true ? When there are no rows it will show the spinner but it does not look good because the height of the grid is so short. I have tried some css min-height on the container and the style of the grid being style="width: 100%; height: 100% but that did not make a difference.

Anyone e across this and able to get a min height so the grid is not so short when there are a small amount of records?

Thank you

I am wondering if there is a way that the ag-grid can have a min height when using domLayout = true ? When there are no rows it will show the spinner but it does not look good because the height of the grid is so short. I have tried some css min-height on the container and the style of the grid being style="width: 100%; height: 100% but that did not make a difference.

Anyone e across this and able to get a min height so the grid is not so short when there are a small amount of records?

Thank you

• javascript
• angular
• ag-grid

• Hi, can you share a link or some code to be understandable? Screenshot also might be useful. Also can you tell us your Angular and Ag-grid versions please? – LuDeveloper Commented Apr 7, 2020 at 3:20

2 Answers 2

I recently had a similar issue. I forced a min-height by using the following CSS:

.ag-center-cols-clipper,
.ag-center-cols-container {
  min-height: 300px !important;
}

Note that if you are using pinned columns, or other advanced features, you may need to override more styles.

for Aggrid v32+

<AgGridReact
   className={rowData.length===0? "ag-no-rows" : ""}
   ...
/>

CSS

.ag-no-rows {
  .ag-center-cols-viewport {
    min-height: 200px !important;
  }
}