Angular Material 下拉宽度变化

Question

我正在使用 Angular Material 下拉菜单。似乎 UL 列表元素取决于按钮宽度。我附上了按钮和下拉菜单。我想改变下拉宽度而不是按钮。在按钮中我只输入“创建”，在下拉菜单中，我想输入“创建文档”、“创建 PDF”。现在我得到按钮宽度大小下拉列表。所以下拉内容无法正常查看。如何改变下拉宽度。

Answer 1

Angular Material已经为此提供了解决方案。

mat-select 提供一个名为“panelClass”的属性

通过它我们可以像这样改变下拉面板的宽度：

在style.css中：

.panel-custom-width {
    width: 300px !important;
    max-width: unset !important;
}

在你的组件中：

<mat-select name="countryString" panelClass="panel-custom-width" [(value)]="selectedCountry">
    <mat-option [value]="'GB'">Great Britain</mat-option>
    <mat-option [value]="'US'">United States</mat-option>
    <mat-option [value]="'CA'">Canada</mat-option>
</mat-select>

Angular Material 下拉宽度变化

Angular Material dropdown width change

angular

angularjs-directive

angular-material

material-ui

material-design