Mat-Select不采用.mat-form-field-infix（边缘浏览器）的默认父宽度180px

Question

Mat-Select应该为180px，这是mat-infix容器的宽度

问题

如果未设置表单字段的宽度，则选择跨度为100％

此表单字段未设置任何显式宽度，但是select元素不包含在其中包含mat-form-field-infix的180px中。在Edge（Windows 10中的最新版本）以外的所有浏览器上都可以正常工作

正常行为 Chrome

异常行为边缘

在GitHub上也遇到了Open的问题，我需要一些解决方法，直到它们解决为止

Answer 1

我自己发现，只需将材料mat-select包裹在一些div中，然后给其width等于input。

赞

<div class="select-cover">
              <mat-form-field appearance="outline">
                <mat-label>Records Per Page</mat-label>
                <mat-select [(ngModel)]="selectedPageSizePerformers" (ngModelChange)="selectChange()">
                  <mat-option [value]="10">10</mat-option>
                  <mat-option [value]="25">25</mat-option>
                  <mat-option [value]="50">50</mat-option>
                </mat-select>
              </mat-form-field>
            </div>

并为其设置样式

.select-cover{
  width: 198px;
}

Answer 2

这似乎是Angular Material bug，您可以将有关此问题的反馈发布到Angular Material。

作为一种解决方法，您可以尝试使用html元素，并使用matNativeControl属性和与垫子相关的CSS样式。

赞：

<select class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" id="mat-input-0" aria-invalid="false" aria-required="true" required="" _ngcontent-evs-c20="" matnativecontrol="">
      <option value="volvo" _ngcontent-evs-c20="">Volvo</option>
      <option value="saab" _ngcontent-evs-c20="">Saab</option>
      <option value="mercedes" _ngcontent-evs-c20="">Mercedes</option>
      <option value="audi" _ngcontent-evs-c20="">Audi</option>
</select>