ag-grid Height=100% collapsed

10
votes

Locally ran Basic AngularJS 1.x Example, found out if style="height: 100%;" the grid collapsed into a horizontal line. Setting it to something else like 100px works. Everything the same except my Angular is 1.5.0, and ag-grid v8.1.0.

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

JS is the same as the tutorial. Looks like a bug.

3
ag-grid
except you put the ag-grid div inside of a div that has 0 height... so 100% of 0 is 0. Give some height to your div that has the ng-controller or set the ag-grid inside of the body tag like the example has. - Jarod Moser
good point, how about this original: <body ng-app="example" ng-controller="exampleCtrl"> <div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div> </body> </html> - Jeb50
@JarodMoser it shouldn't be the parent <div> as we do it all the time that is not to specify any height for any parent <div>, it supposed auto-expand unless there is a "fixed" attribute. - Jeb50
BTW, browser is FF 50.1.0 - Jeb50
My original comment was based on this width and height portion of the ag-grid docs. I tried to recreate your issue running a local file, but was unable to reproduce. I tried with JSFiddle and plunkr, but those sites have more JS that are adjusting the HTML tag's height in the iframe and causing different magic to happen... - Jarod Moser

3 Answers

13
votes

This is almost certainly due to you having DOCTYPE html in your html file.

If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found.

This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use.

The easiest thing for you to do is this:

<style>
    html, body {
      width: 100%;
      height: 100%;
    }

This StackOverflow Question/Answer explains the underlying issue pretty well

11
votes

You shall try setting the autoHeight of the ag-grid, by setting the DomLayout.

See the sample code below for angular.

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    //The ag-grid is not enlarging based on the page height, 
    //so dynamically adjusting the height of the grid
    this.gridApi.setDomLayout("autoHeight");
}

For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview

1
votes

.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
    height: 100%;
}