13

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.

ssuperczynski
  • 3,190
  • 3
  • 44
  • 61
Jeb50
  • 6,272
  • 6
  • 49
  • 87
  • 1
    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 Feb 22 '17 at 20:05
  • good point, how about this original: `

    `

     – Jeb50 Feb 22 '17 at 20:23
  • 1
    @JarodMoser it shouldn't be the parent
    as we do it all the time that is not to specify any height for any parent
    , it supposed auto-expand unless there is a "fixed" attribute.
     – Jeb50 Feb 22 '17 at 20:25
  • BTW, browser is FF 50.1.0 – Jeb50 Feb 22 '17 at 21:04
  • My original comment was based on this [width and height](https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=0) 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 Feb 22 '17 at 21:13
  • it's probably my end cz I'm getting the same for javaScript. – Jeb50 Feb 22 '17 at 22:39
  • Hi, did you get a solution? I'm having the same problem? setting a height is fine, but if I set a fix height, I'm either getting a vertical scroll bar or have some empty space. – Angela P Jun 22 '17 at 19:11
  • @AngelaPan No, but like I said below, make attribute-free. – Jeb50 Jul 02 '17 at 17:51

3 Answers3

15

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

Community
  • 1
  • 1
Sean Landsman
  • 7,033
  • 2
  • 29
  • 33
  • 1
    It tells why. Your solution didn't work until I cut out everything inside of , leave it attribute-less. This is my original ` ` – Jeb50 Feb 23 '17 at 19:05
  • 1
    That's interesting - thanks for the update. I'll have to take a look at that – Sean Landsman Feb 24 '17 at 09:56
15

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

Bibin Gangadharan
  • 1,393
  • 12
  • 13
  • 1
    This worked for me, with the addition of `(gridReady)="onGridReady($event)"` in the grid html and removing the height option from the css. – DancingDad Jul 12 '20 at 09:24
  • 1
    If I understand correctly, this isn't quite the same thing as setting height to 100%: it fixes the problem of the grid being zero height, but it attempts to size the grid to its contents (and may incur a performance penalty for a large number of rows, since it tries to measure every row), instead of taking the full available height. See https://www.ag-grid.com/javascript-grid/grid-size/#grid-auto-height. – Josh Kelley Mar 15 '21 at 18:27
4

.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
    height: 100%;
}
Rizwan Akram
  • 220
  • 2
  • 5