Раскрывающийся список угловых материалов у Chrome и IE

Question

У меня есть пользовательский компонент мобильного поля, который показывает селектор флага и поле ввода.

В Chrome это выглядит следующим образом.

выбор свернут:

выберите расширенный:

Где, как в IE:

Я вижу, что это потому, что у меня MAT-SELECT установлен на width 40px, а наложение материала CDK берет это и устанавливает min-width на 40px.

Но, похоже, Chrome игнорирует это, тогда как IE этого не делает и применяет этот размер.

Как заставить IE работать как Chrome?

Код

REF: https://material.angular.io/components/select/examples

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select style="width: 40px">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Это не мой компонент, но он не имеет значения. Вопрос присутствует на любом коврике. Вышеуказанная ключевая строка: mat-select style = "width: 40px" .

Многие хосты и тесты онлайн-кода не работают в IE (очевидно). Так что лучший способ проверить это - просто ссылка на материал и редактирование через инспектора.

Answer 1

Этот код исправил мою проблему.

Ссылка: https://github.com/angular/components/issues/17276 https://github.com/angular/components/issues/11609

/** IE 11 fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  /** IE 11 fixes */
  .cdk-overlay-pane {
    display: block;
  }
}