强制垫扩展面板溢出容器元素

Question

我在 mat-card 里面有一个 mat-expansion-panel。扩展面板包含一个 mat-chip-list，其中包含 50-60 mat-chip 个元素。

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

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

这是我看到的：

下面是复制我所看到内容的代码： https://stackblitz.com/edit/angular-ivy-8lx7gr

我愿意接受实现此目标的其他方法。

Answer 1

这是我的方法；

为了防止 mat-cards 向下拉伸，在 mat-card-content

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

在styles.css

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

因此 mat-expansion-panel 会溢出 mat-card。但是它会在添加到宠物！按钮后面。要解决此问题，请使用；

.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;
}

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

确保纸片正确显示其内容，没有文字溢出。

.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">

这是一个工作演示：https://stackblitz.com/edit/angular-ivy-6rsdzw

希望对您有所帮助。

强制垫扩展面板溢出容器元素

Forcing mat-expansion-panel to overflow container element

angular

angular-material

mat-card

mat-expansion-panel