Setting height: 100% causes the grid to load and render all data.

[johnib]

Hello,

I have an object with around 20K results, which initializes the grid as follows:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>

$http.get('data.json')
    .then(function (res) {
        return transformResults(res.data);
    })
    .then(function (defs) {
        $scope.gridOptions.api.setColumnDefs(defs.columnsDef);
        $scope.gridOptions.api.setRowData(defs.rowsDef);
    });

The Chrome browser crashed while rendering the grid (the transform function took ~200ms).
But when I've set:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 850px;"></div>

it worked blazing fast.
Yet, I need to set the height to 100% of the div containing the grid's element.

Am I using this in the wrong way or is it a bug?

[ceolter]

it's usually a CSS issue for you. the grid will fill the height of the div you give it. see the note on % height here:
https://www.ag-grid.com/javascript-grid-width-and-height/index.php

[johnib]

Well, I'm using a clean angular 1 boilerplate for testing this.
There are no CSSs at all except for those of the grid.

If I set the grid's height to absolute pixel value, it initializes the grid with 20K results immediately.
Once, the grid's height is set in percentages (even 10%) the initialization time depends on the size of the input (with 20K results it's in minutes).

[ceolter]

as i mentioned, its' your css. when you use %height, you have to be mindful of the height of the parent div also (especially if you don't set it). to get it working, drop the ag-grid bit (but leave the div in) and observe that your %height doesn't work as you think it does, the div will scroll way down your page.

[thearabbit]

has fixed already?
Pl share

[ralexand56]

Is there a way to troubleshoot this because I'm getting horrible performance and every parent has a height of 100% set.