Question

我一直在尝试使用带有弹性布局的ag-grid，但是它似乎没有按预期工作。

以下堆叠闪电战有一个可复制的示例： https://stackblitz.com/edit/angular-zwpdhl

我将ag-grid坐在具有列flex布局的父项下，而父项本身位于mat-sidenav-content下。我的期望是，ag-grid将占据flex列中的其余高度，如果网格数据太大，则网格将获得垂直滚动条。但是，发生的情况是网格折叠为没有高度的水平线。我尝试将网格位置设置为绝对，（顶部，左侧，右侧，底部）的值为0，但这会破坏flex列，因为网格现在与列中的其他元素重叠。唯一的解决方法似乎是将网格设置为固定的高度，但这使flex布局无法实现。

有人遇到过这个问题吗？有什么想法可以使其在Flex布局中正常工作吗？

Answer 1

您的问题是mat-sidenav-content内的多余div-没有它，网格将仅呈现fine：

<mat-sidenav-content fxLayout="column" fxLayoutGap="5px" fxFlex>
    <div>Toolbar</div>
    <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
    </ag-grid-angular>
</mat-sidenav-content>

代替

<mat-sidenav-content>
  <div fxLayout="column" fxLayoutGap="5px">
     <div>Toolbar</div>
     <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
       </ag-grid-angular>
  </div>
</mat-sidenav-content>

说明：mat-sidenav-content具有所需的整个列的高度，但本身不是伸缩容器-这意味着<div fxLayout="column" fxLayoutGap="5px">被布置为普通块元素，其高度由内容定义。 ag-grid-angular元素的定义高度为100％，causes some problems作为flex列容器的子元素。只需删除此额外的div，网格元素上的高度100％就可以工作了，因为mat-sidenav-content已经具有定义的高度。

将AG-Grid与Flexbox结合使用

1 个答案: