Angular Material 扩展面板内的下拉菜单被截断

Question

我在 Angular Material 扩展面板中遇到了这个问题。部分分页下拉列表被截断。如何使下拉菜单与扩展面板的末尾重叠？我试了 z-index 没用。

Material 手风琴内有三个面板。

相关代码如下：

<mat-accordion class="example-headers-align" multi>
            <mat-expansion-panel hideToggle>
              <mat-expansion-panel-header>
                <mat-panel-title>
                Title
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p-table
                #dt
                [columns]="cols"
                [value]="tableDataSummary"
                [paginator]="false"
                scrollable="true"
                sortMode="multiple"
                [resizableColumns]="true"
                [rowHover]="true"
                [rows]="10"
                scrollable="true"
                resizableColumns="true"
                [rowsPerPageOptions]="[10,100]"
                appendTo="body"
                [paginator]="true"
              >
                <ng-template pTemplate="header" let-columns>
                  <tr>
                    <th pSortableColumn="col" *ngFor="let col of columns">
                      {{col.header}}
                    </th>
                  </tr>
                  <tr>
                    <th
                      *ngFor="let col of columns"
                      [ngSwitch]="col.field"
                      [pSortableColumn]="col.field"
                    >
                      <p-sortIcon [field]="'col.field'"></p-sortIcon>
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <tr [pSelectableRow]="rowData">
                    <td
                      *ngFor="let col of columns"
                      style="line-break: anywhere;"
                    >
                      <span
                        *ngIf="col.field === 'TR' || col.field === 'TwR' || col.field === 'FT'; else elseBlock"
                        [ngClass]="rowData[col.field] > 0.10 ? 'red' : null"
                      >
                        {{ rowData[col.field] | percent:'1.0-2' }}
                      </span>
                      <ng-template #elseBlock>
                        {{ rowData[col.field] }}
                      </ng-template>
                    </td>
                  </tr>
                </ng-template>
                <ng-template pTemplate="paginatorleft" let-state>
                  Showing {{(state.page * state.rows) + 1}} to {{state.rows *
                  (state.page + 1)}} of {{state.totalRecords}}
                </ng-template>
              </p-table>
            </mat-expansion-panel>

谢谢！

由于有人在看这个问题，我相信问题是我用来将 table 放入的卡，而不是扩展面板本身。 Angular Material 卡片尝试包含其内容且不会溢出。

Answer 1

这是 Modals/Dialogs 手风琴等的常见问题... 我解决了这个问题添加到父容器 CSS 属性:

overflow: inherit

例如在Angular Material扩展中：

.mat-accordion>.mat-expansion-panel-spacing {
    overflow: inherit;
}

...这解决了我的问题，父级 div 正在根据下拉列表和其他具有动态高度的 html 元素进行扩展。

Angular Material 扩展面板内的下拉菜单被截断

Dropdown inside Angular Material Expansion Panel is cut off

html

angular-material

primeng-datatable