ag-grid: Grid does not resize
I use the AdminLTE framework and I added the grid to it
<div class="box-body">
<ag-grid id="myGrid" class="ag-fresh"></ag-grid>
</div>
I added the following grid options
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableColResize: true,
};
and it does not resize. I have 7 columns and every column gets around 200px so my grid has a width of 1400px.
Interestingly it resizes if I set showToolPanel to true or remove the display: none
flag from it after the grid has loaded. I am using version: “2.3.5”.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 1
- Comments: 20 (6 by maintainers)
I just did more testing. Everything works on 9.0.x until I use pagination and the the window resize from large to small breaks. To fix this I overrode the styling on the
#center
div to bewidth: auto
and this solved all my weird issues including a 1px horizontal scroll I was getting.EDIT: In order to get rid of the 1px horizontal scroll I also added:
.ag-body-viewport-wrapper { width: 100%; }
I’m seeing the same thing with ag-grid-react 15.0. None of the above worked. Is there a fix for this yet?
I’m experiencing the same thing. I’m not showing or hiding the tool panel, but whenever I try shrinking the window, the grid stays the same size. It does get bigger though.
I’m calling doLayout() as well.
I found the solution to this problem for us, so I thought I would share it just in case it helps someone else. One of my colleagues had created a .less file for us to style ag-grid tables to match the rest of our site. He was experimenting with some things and had added a style of “display: table” to the ag-grid class. Removing this style fixed the issue for me. Our tables now recalculate when the window gets smaller.