css 铺层扩展板/铺层折叠中的聚集

vlf7wbxs  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(92)

我使用的是angular和aggrid,我希望我的网格可以在一个垫子扩展面板中调整高度,以便在打开时占据所有的屏幕可用空间。我该怎么做呢,最好是在css中?
aggrid似乎正在适应容器和垫子对内容的扩展。
我还希望橙子的文本被固定在面板的底部,并有滚动条只为网格。
我做了一个猛料来帮忙: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>

谢啦,谢啦

uz75evzq

uz75evzq1#

好吧,没有办法,我终于避免了把扩展面板的网格表取出来的问题,这样我就可以用flex css来适应页面可用的内容了

相关问题