ag-grid: ag-grid.css is broken in version 20.2.0

Using Ag-grid 20.2.0 and following the online guide:

https://www.ag-grid.com/angular-getting-started/

in the example app , if I use in the style a width and an height defined as percentage instead of pixels, the table becomes invisible:

<ag-grid-angular 
    style="width: 100%; height: 50%;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

Please note: the same example works perfectly on 20.0.0

(and even copy-pasting the file ag-grid-community/dist/styles/ag-grid.css" from version 20.0.0 to version 20.2.0 )

And because I’m forced to use pixels instead of percentage also the method: “sizeColumnsToFit” works in a different/wrong way

Is that normal? how can we tell Ag-grid to use the full available space horizontally and vertically without using the percentage?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 30 (8 by maintainers)

Most upvoted comments

Wow, so great! Thanks very much for your help. I understand now. Didn’t have to use 100% in the first place, v20 did take up all the needed space, v21 doesn’t anymore.

I didn’t know the autoHeight switch, it works like a charm!

For anyone wondering, just add this to your grid attributes:

<ag-grid-angular ...attributes... domLayout="autoHeight"></ag-grid-angular>

And it will now behave as in v20 without specifying a height.

Glad to have it working, now v21 can be used in my project 😃

Note: Had to hack a bit the CSS to avoid having the table being too long with just 1 row (it had a min-height: 50 put somewhere in the style, which is more than a single row):

.ag-body-viewport.ag-layout-auto-height .ag-center-cols-clipper {
  min-height: unset;
}

Thanks a lot

qortex on Jun 25, 2019

example using width / height width % - https://next.plnkr.co/edit/A3KfXUA44Nxprgl3?preview example using flexbox - https://next.plnkr.co/edit/xCzRKE4hgCTNcW6Q

Please, if you have any further questions on this, go through ZenDesk.

gportela85 on Jun 21, 2019

Same problem. ag-grid-angular 20.1.0 works fine. but, 20.2.0 and 21.x don’t show entries (height is 0).

saeidzebardast on Jun 17, 2019

If you don’t want the grids to have scrollbars, you should use autoHeight.

We need two versions of plunker to be able to move forward, one working with v20 and one broken with v21, otherwise I won’t be able to help. Using height: 100% to fill the remaining space instead of being exactly the same height of its parent is a bug. That’s the whole reason for Flexbox.

gportela85 on Jun 26, 2019

Hi, thanks for taking the time. Don’t have a ZenDesk account, so kind of stuck on this issue 😦 Please let me know if there’s a way to access ZenDesk for non-paying users and I will gladly post there.

Your examples unfortunately does not solve the issue: the height is always fixed in your example (100% of the viewport).

In our use cases, which worked fine in v20.0.0, the height of the grid depends on the number of rows, and uses exactly the right amount of vertical space. As you would expect with classic HTML grid or any grid really.

In your examples, if you don’t set height: 100% to the main wrapper, the grid becomes unvisible.

So the question is: how to have the grid take exactly the vertical space it needs, without first setting the desired height?

I hope it is clearer?

qortex on Jun 22, 2019

Did anybody solve this? Any pointer from the ag-grid team to help with that? It must be working for you otherwise it would block the release, can you share an example code with us please? @gportela85 @makinggoodsoftware ?

Could the ticket be reopened so that it gets proper attention? Thanks a lot for your help!

qortex on Jun 21, 2019

Same here, I have tried to use flex, setting this style for Ag-grid:

style=“height:100%; width:100%; display:flex;”

Table is still not visible… Not even clear to me why this has been closed…

navy1978 on Jun 14, 2019

Ok, I’m fine using Flexbox, do you have an example of how it should be setup?

I tried what’s in https://www.ag-grid.com/javascript-grid-responsiveness/, but height: 100% still does not work (see this plunkr).

Note: why isn’t this considered a breaking change? Updating from 20.0.0 to 20.2.0 makes all grids disappear on my setup as you saw, it might help also others to drop a note / workaround in the docs?

Thanks for your help and your time, Best

qortex on Jun 10, 2019