Question

我正在基于以下示例在我的角度应用程序中添加一个mat-select：here

但是，我对此选择不满意的一件事是，如果我选择一个值并重新打开以选择另一个选项，则该列表将对齐到所选的选项，并且我的列表的一半可能在该位置的上方和下方。实际的选择器在屏幕上

我已经阅读了角材文档，但是看不到任何替代此默认设置的选项。我是否有某种方法无法做到这一点，或者有人对如何做到这一点有任何示例CSS？或者，从UI角度来看，有什么原因为什么我不应该覆盖它？

谢谢

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

那为我解决了。

停止角材料垫选择从屏幕上溢出

1 个答案: