包装垫选择选项以适合控件的宽度

Question

我在CSS下面使用来包装mat-select选项并正常工作。

同一css也适用于少数几个自动完成选项，因此自动完成功能无法正确包装，这意味着该选项隐藏了其他选项。

.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