ag-grid 高度=100% 折叠

Question

局部运行Basic AngularJS 1.x Example，发现style="height: 100%;"网格是否折叠成水平线。将其设置为 100px 之类的其他值即可。除了我的 Angular 是 1.5.0 和 ag-grid v8.1.0.

之外，一切都一样

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

JS和教程一样。看起来像一个错误。

Answer 1

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

如果这样做，则需要确保网格容器的填充高度不为 0，否则它会像您找到的那样显示为一条扁平线。

这不是 ag-Grid 特有的问题 - 这是没有使用 quirks 模式的副作用。

对您来说最简单的事情是：

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

This Whosebug Question/Answer 很好地解释了根本问题

Answer 2

您应该尝试设置 ag-grid 的自动高度，方法是设置 DomLayout。

参见下面的示例代码 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");
}

参考这个https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview

Answer 3

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

ag-grid 高度=100% 折叠

ag-grid Height=100% collapsed

ag-grid