Grid 100% height is calculated wrongly within Angular Material app

[amrit-moomie]

Description

After updating my Angular material app to version 7.3.5, all the grids are rendering with wrong height.
So far I have noticed this in my Angular material app only so I have created a shell app on stackblitz to reproduce this issue.
https://stackblitz.com/edit/infragistics-grid-height-issue

• igniteui-angular version: 7.3.5
• browser:

Steps to reproduce

1. Open stackblitz running 7.3.4 https://stackblitz.com/edit/infragistics-grid-height-issue
2. Grid will correctly render with 100% height
3. Update package.json to 7.3.5.

Result

Grid height is wrongly calculated

Expected result

Grid height should be 100% to the available space.

Attachments

7.3.4

7.3.5

[ChronosSF]

Thanks for the report!

The 7.3.4 implementation had issues of its own. You could load data in a way that makes the grid think you want to disable virtualization and crash your browser when loading thousands of records.

In the latest version this case hits a limitation where the grid tries to load in a hidden container therefore its height is 0. This causes it to auto-size (i.e tries to work like a content-box) which by default is rendering a body height of 10 records * their row height. We are planning to release a fix for such scenarios in the very near future.

If you need a quick workaround for an app you are building and you can't use 7.3.4, you could set the grid height to e.g. 99% on afterViewInit (or have it 99% by default then set it to 100%). This will stop it auto-sizing and instead force it to take the height of its parent container which is by then visible and its height available.