Angular Material mat-select下拉框宽度

Question

当前下拉框的宽度大于行的宽度：

有没有办法去掉多余的宽度？

这是我的当前代码：

HTML:

<mat-form-field>
    <mat-select disableOptionCentering placeholder="Choose an option">
      <mat-option [value]="option" *ngFor="let option of my_list">
          {{ option }}
      </mat-option>
    </mat-select>
</mat-form-field>

我的列表：

export const my_list: string[] = [ "a", "b", "c", "d"];

style.css:

.mat-select-panel{
    margin-left: 15px;
    margin-top: 28px;
}

- Meng

---

可能是重复问题： https://dev59.com/1ajka4cB1Zd3GeqPDsT0 - rikg93

嗨，RikG93，我认为这两篇文章不是在讨论同一个问题。我想缩小可滚动面板的宽度。链接中的答案提供了一个在向下滚动可滚动面板时加载更多内容的解决方案。 - Meng

你最后解决了吗？我也在尝试做同样的事。 - cheesydoritosandkale

这仍然是一个错误，但我找到了一个解决方法：https://github.com/angular/components/issues/14515 - Vlad

你尝试给表单容器添加一个类并设置它的宽度了吗？ - Jay Ordway

Answer 1

对于仍在尝试弄清楚而不改变实际选择器大小的人。

mat-select-panel使用mat-select宽度加32px的100％。

min-width: calc(100% + 32px)

您可以使用ng-deep来覆盖此样式：

::ng-deep .mat-select-panel {
    min-width: 100% !important;
}

- David - ACA Group

Answer 2

尝试这个并改变宽度：

   <mat-select style="width:10px">

- rikg93

---

这将移动mat-select-arrow的位置。是否可能将mat-select-arrow放在末尾，并使可滚动面板的宽度等于下划线的宽度？ - Meng

不要更改宽度，也不要更改位置。你可以尝试使用min-width: calc(100%- 30px)，其中30px是一个示例。 - rikg93

Answer 3

请尝试以下方法：

.mat-select-panel:not([class*=mat-elevation-z]){ min-width: calc(100% + 0px) !important; }

- Zubayer Bin Ayub

Answer 4

在mat-form-field标签级别上设置宽度。尝试使用以下方法：

<mat-form-field style="width:50px">

- Suhas Zimbar

---

对我来说非常好用，谢谢！ - AlePorro

Answer 5

\为mat-form-field标签添加类

\并为该类编写样式

.input-container {
  width: 100%;
  \\  enter code here
}

- Roshan Madusanka