Angular Material 下拉菜单宽度变化

【问题标题】：Angular Material dropdown width changeAngular Material 下拉菜单宽度变化
【发布时间】：2021-03-26 18:14:24
【问题描述】：

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

【问题讨论】：

标签： angular angularjs-directive angular-material material-ui material-design

【解决方案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>

【讨论】：