防止Angular Material mat-select溢出屏幕

Question

我正在根据以下示例将mat-select添加到我的Angular应用程序中：这里。但是，我不喜欢这个选择器的一件事情，即如果我选择一个值并重新打开以选择另一个选项，则列表将捕捉到所选选项，并且我的列表可能在屏幕上方和下方，在实际选择器位置之间被分成两半。我已经阅读了Angular Material文档，但看不到任何覆盖此默认值的选项。有没有我错过的方法来做到这一点？或者从UI角度讲，有没有任何理由不覆盖这个选项？谢谢。

- Kieran_M

Answer 1

我曾经遇到过一个类似的问题，就是选择框“溢出屏幕”的情况，我使用了MatSelect的panelClass属性来解决它。

我使用它来设置max-height。

my.component.html

<mat-form-field class="form-fields">
      <mat-select matNativeControl
                  panelClass="max-height" <!-- see this here  -->
                  placeholder="Task"
                  (selectionChange)="validate()"
                  [formControl]="task">
        <mat-option *ngFor="let task of tasks"
                    [value]="role.code">{{ role.name }}</mat-option>
      </mat-select>     
</mat-form-field>

styles.scss

.max-height {
  max-height: 175px !important;
}

这对我解决了问题。

- str8up7od

---

这并不能阻止它溢出屏幕，只是限制了高度。 - Schattenjäger