我正在使用 angular 和 aggrid,我希望我的网格在垫子扩展面板中适应高度,以在打开时占用所有屏幕可用空间。 我该怎么做,最好是在 css 中?
看来aggrid正在适应容器和mat扩展到内容。
我还希望橙色文本固定在面板底部,并且滚动条仅用于网格。
我做了一个 plunker 来帮忙:https://plnkr.co/edit/Y0tJ1yoDb5LhDB8a
<div style="height: 500px; background-color:red; ">
<mat-accordion multi displayMode="flat" style="margin: 10px;">
<mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color:blue;" >
<mat-expansion-panel-header>
<mat-panel-title>Panel 1</mat-panel-title>
</mat-expansion-panel-header>
text<br> text<br> text<br> text
</mat-expansion-panel>
<mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color:green;">
<mat-expansion-panel-header>
<mat-panel-title>Panel 2</mat-panel-title>
</mat-expansion-panel-header>
text<br> text<br> text<br> text
</mat-expansion-panel>
<mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color: white;">
<mat-expansion-panel-header>
<mat-panel-title>Panel aggrid</mat-panel-title>
</mat-expansion-panel-header>
<ag-grid-angular
#agGrid
style="height:100px"
id="myGrid"
class="ag-theme-alpine"
[modules]="modules"
[columnDefs]="columnDefs"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
<div style="background-color: orange" >
This text should always be visible when expanded. aggrid should adapt to content
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
谢谢
答案 0 :(得分:0)
好吧,没有解决方案,我终于避免了取出垫子扩展面板的网格表的问题。这样我就可以使用 flex css 来适应页面可用的内容