Question

我使用angular2 mat-select控件，并尝试更改其下拉列表菜单的宽度和位置以匹配父元素（默认情况下它更宽，并在几个像素的两边溢出元素。）我没有在材料网站上看到这样的选项，并且css的覆盖是复杂的，因为值取决于元素宽度。（需要我的网站中的所有选择菜单）

代码示例：

<mat-form-field class="col-sm-8 grey">
  <mat-select [(value)]="selectedGroup">
    <mat-option *ngFor="let item of groups" [value]="item">{{item.value}}</mat-option>
  </mat-select>
</mat-form-field>

先谢谢！

Answer 1

为了便于在下拉列表中设置样式，可以使用panelClass属性将其他CSS类应用于下拉列表

<mat-form-field>
  <mat-select placeholder="Panel color" [formControl]="panelColor"
              panelClass="example-panel-{{panelColor.value}}">
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>

Source of information

Angular2 mat-select匹配下拉菜单宽度

1 个答案: