css - 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"];

样式.css：

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

Answer 1

试试这个并改变宽度：

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

Answer 2

尝试这个

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

Answer 3

对于仍在试图弄清楚而不使实际选择更小或更宽的任何人。

mat-select-panel 使用 100% 的 mat-select 宽度加上 32px

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

你可以用 ng-deep 覆盖这个样式：

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

Answer 4

\ 将类添加到 mat-form-field 标记

\并将样式写入该类

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

Answer 5

在 mat-form-field 标签级别设置宽度。尝试这个，

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