如何将下拉面板放置在 mat-select 文本框的正下方

Question

我正在使用

Angular Material 14.0.4

和

Angular 15.1.3

。

我有一个

mat-select

下拉菜单，是这样写的...

<mat-select value="5" panelClass="custom-panel">
    <mat-option value="5">5</mat-option>
    <mat-option value="10">10</mat-option>
    <mat-option value="20">20</mat-option>
</mat-select>

在此我应用了

panelClass

及其CSS代码如下...

.custom-panel {
    top: calc(100% + 10px) !important;
}

而且仍然如下。下拉列表与其文本框重叠

这是未选中时的下拉菜单

这是选择后的下拉菜单

如何将面板放置在选择文本框的正下方...

Answer 1

您可以使用下面的CSS来做到这一点！

我们使用css

transform

将面板移动到底部！

.custom-panel {
  transform: translateY(25px) !important;
}

堆栈闪电战