angular - 强制 mat-expansion-panel 溢出容器元素

Question

我有mat-expansion-panel一个mat-card. 扩展面板包含mat-chip-list50-60个mat-chip元素。

当我展开这个面板时，我所有的mat-card对象都被向下拉伸，并且芯片一个一个地显示在一个列中。

我想要做的是让扩展面板显示在其容器的顶部，这样用户就可以一次看到所有的垫子，而不必向下滚动一堆。

这是我所看到的：

我对实现这一目标的替代方法持开放态度。

score 2 · Accepted Answer

这是我的方法；

<mat-card-content class="modified-mc-content">

在styles.css

.modified-mc-content {
  height: 48px
}

结果mat-expansion-panel会溢出mat-card。但它会在Add to Pet 后面！按钮。为了解决这个问题，把它放在前面；

.modified-mc-content > mat-expansion-panel {
    z-index: 1;
}

现在mat-expansion-panel可以正常溢出，但会导致页面滚动，这是不可取的。相反，我更喜欢在里面滚动mat-expansion-panel。所以让mat-expansion-panel有一个固定的高度和滚动；

.modified-mc-content > mat-expansion-panel > .mat-expansion-panel-content {
    max-height: 50vh;
    overflow: auto;
}

通过设置height和overflow打开.mat-expansion-panel-content在两个方面帮助我们；1. 防止mat-expansion-panel超出页数限制。1. 使mat-expansion-panel内容可滚动，而标题保持不变。

确保芯片正确显示其内容，而不会溢出文本。

.modified-mc-content mat-chip {
  height: auto
}

最后，确保卡片在fxLayout.xs="column"激活时正确地相互重叠。

<mat-card *ngFor="let food of foods;let i = index" [style.z-index]="foods.length - i">

希望能帮助到你。

1 回答 1