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)

Most upvoted comments

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 be width: 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%; }

papabear on Apr 12, 2017

I’m seeing the same thing with ag-grid-react 15.0. None of the above worked. Is there a fix for this yet?

amie-wilt on Mar 13, 2018

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.

nixkuroi on Jun 2, 2016

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.

wholladay on Aug 24, 2017