angular - 包装垫选择选项以适应控件的宽度

Question

我使用下面的 css 来包装 mat-select 选项并且工作正常。

相同的 css 也适用于少数自动完成选项，因此自动完成无法正确包装，这意味着选项与 upside 和 downside 的其他选项一起隐藏。

.mat-select-panel mat-option.mat-option {
  height: unset;
}

.mat-option-text.mat-option-text {
  white-space: normal;
}

此代码需要进行哪些更改？

Answer 1

设置<mat-form-field></mat-form-field>包装标签的宽度，例如：

<mat-form-field class="example-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
</mat-form-field>

CSS：

.example-width {
   width: 50%; -- or the width you want for auto-complete
}

Working-Demo