Wrap mat-select параметры, чтобы соответствовать ширине элемента управления

Question

Я использую ниже CSS, чтобы обернуть варианты выбора мат и работает нормально.

Тот же самый 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