ag-grid高度= 100%崩溃

Question

本地运行Basic AngularJS 1.x示例,发现style="height: 100%;"网格是否折叠成水平线.将其设置为100px之类的其他工作.除了我的Angular之外的所有东西都是1.5.0和ag-grid v8.1.0.

HTML

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

JS与教程相同.看起来像个bug.

Answer 1

这几乎可以肯定是因为你的html文件中有DOCTYPE html.

如果这样做,那么您需要确保网格容器具有非0高度以填充,否则它将显示为您找到的平面线.

这不是ag-Grid特定的问题 - 它是没有使用怪癖模式的副作用.

你最容易做的就是:

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

StackOverflow问题/答案很好地解释了潜在的问题

Answer 2

您应该尝试通过设置 DomLayout来设置ag-grid的 autoHeight。

有关角度，请参阅下面的示例代码。

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");
}

如需参考，请参阅此https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview

Answer 3

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