ag-grid Height=100% collapsed

Jeb50 picture Jeb50 · Feb 22, 2017 · Viewed 7.4k times · Source

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.

Answer

Sean Landsman picture Sean Landsman · Feb 23, 2017

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