时间戳

首页 > 解决方案 > Angular Material 下拉菜单宽度变化

angular - Angular Material 下拉菜单宽度变化

问题描述

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

按钮宽度

落下

标签： angularangularjs-directiveangular-materialmaterial-uimaterial-design

解决方案

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>

推荐阅读