垫子扩展面板中的 ag 网格 / 垫子手风琴

Posted

技术标签:

【中文标题】垫子扩展面板中的 ag 网格 / 垫子手风琴【英文标题】:aggrid in mat extansion panel / mat accordion 【发布时间】:2021-06-13 14:16:30 【问题描述】:

我正在使用 angular 和 aggrid,我希望我的网格在垫子扩展面板中适应高度,以便在打开时占用所有屏幕可用空间。 我该怎么做,最好在 css 中?

似乎 agggrid 正在适应容器和 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>

谢谢

【问题讨论】:

【参考方案1】:

好吧,没有解决办法,我终于避免了取出垫子扩展面板的网格表的问题。因此我可以使用 flex css 来适应页面可用的内容

【讨论】:

以上是关于垫子扩展面板中的 ag 网格 / 垫子手风琴的主要内容,如果未能解决你的问题,请参考以下文章

ext.js 网格内部手风琴:如何将网格标题设置为手风琴的

如何保持其中一个扩展面板始终在手风琴中展开?

Extjs 手风琴动态关闭所有面板

从 extjs 4 中的手风琴和网格获取价值

如何在 PrimeNG 中向手风琴添加滚动条?

仅向单击的手风琴面板添加或删除类