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

Question

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

问题

Select 如果未设置表单域的宽度，则跨越 100%

此表单字段没有明确设置宽度，但是 select 元素未包含在包含它的 mat-form-field-infix 的 180px 中。它在除 Edge 之外的所有浏览器上都能正常工作（Windows 10 中的最新版本）

正常行为 Chrome

异常行为边缘

还有它和 GitHub 上的未解决问题我需要一些解决方法，直到他们修复

Answer 1

这似乎是一个 Angular Material bug，您可以 post 将此问题反馈给 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>

Answer 2

我自己弄明白了，只需将 material 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;
}

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

Mat-Select does not take default parent width of 180px of .mat-form-field-infix (Edge Browser)

css

cross-browser

angular-material

microsoft-edge

angular