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.
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
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
.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With