自定义垫选择宽度 - Angular 11答案

【问题标题】：Customizing Mat-Select Width - Angular 11自定义垫选择宽度 - Angular 11
【发布时间】：2021-09-07 09:54:36
【问题描述】：

我是 Angular/Angular Material 的新手，所以我不确定这是我需要自己编写的代码还是已经以特定方式构建的代码。我在 mat-select 的下拉菜单中遇到问题，单击 select 时弹出的面板与带有箭头的选择下拉栏的宽度不匹配。我从这个问题中了解到：Styling mat-select in Angular Material 面板的宽度始终等于选择元素的宽度，但对我来说并非如此。如果下拉菜单的大小不同，有没有办法修复下拉菜单的宽度？

【问题讨论】：

请添加一些代码供我们调试。不看代码，很难帮你解决

标签： css angular drop-down-menu angular-material angular11

【解决方案1】：

这取决于您在 mat-options 上的文本选项的宽度。

面板始终采用最大文本长度的宽度。所以如果最大文本长度是>选择输入元素宽度，那么面板应该是>选择元素宽度。

为了更好地理解： - 示例：最大文本宽度 https://stackblitz.com/angular/olkexjgqxpk?file=src%2Fapp%2Fselect-custom-trigger-example.ts

-最大文本宽度示例 > 选择元素宽度：https://stackblitz.com/edit/angular-4bk5ns?file=src%2Fapp%2Fselect-custom-trigger-example.html

【讨论】：

【解决方案2】：

我将以下两条规则添加到我的顶级样式表中，因此我不必处理我的选择列表中的溢出

.cdk-overlay-pane {
     width: fit-content !important;
}

.mat-select-panel {
     max-width: unset !important;
}

https://stackblitz.com/edit/angular-pqtiem?file=src%2Fstyles.scss

【讨论】：