自定义垫子选择宽度-角度11

Question

我是Angular/Angular Material的新手，所以我不确定这是我需要自己编写的代码还是已经以特定的方式构建的代码。我对垫子选择的下拉菜单有问题，当你点击选择时弹出的面板与箭头的选择下拉条的宽度不匹配。我从这个问题中学到：在Angular Material中选择样式垫时，面板的宽度总是等于选择元素的宽度，但对我来说不是这样。如果下拉框的大小不相同，有办法固定下拉框的宽度吗？

Answer 1

这取决于垫子选项上文本选项的宽度。

面板始终采用最大文本长度的宽度。因此，如果最大文本长度是>选择输入元素宽度，则面板应>选择元素宽度。

为了更好地理解：-示例：最大文本宽度<选择元素宽度：https://stackblitz.com/angular/olkexjgqxpk?file=src%2Fapp%2Fselect-定制触发器-示例.ts

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

Answer 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