Angular Material dropdown different between Chrome and IE

Question

I have a custom mobile field component that shows a flag selector and input field.

In Chrome it looks like this.

select collapsed:

select expanded:

Where as in IE:

I see that this is because I have the MAT-SELECT set to width 40px and Material's CDK overlay takes that and sets a min-width to 40px.

But Chrome seems to ignore this where as IE does not and enforces this size.

How can I get IE to act like Chrome?

Code

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>

This is not my component, but it's not relevant. The issue is present on any mat-select. The key line above is mat-select style="width: 40px".

Many online code host and tests do not work on IE (obviously). So best way to test this is just you the Material link about and edit via the inspector.

If you mean you want the same output in IE as Chrome than I suggest you to post your sample code which can produce the issue. We will try to test your code with IE browser to find any possible solution for the issue. also let us know which exact version of IE you are using for making this test? — Deepak-MSFT
The code you had posted above is not helpful for producing the issue. Official example for mat-select is working fine with IE 11 browser and there is no meaning to add styles to it for a test because their site design is different and your site design is different. If you can provide an example which can produce the issue with IE browser than we can try to test the issue to find the cause for it. Thanks for your understanding. — Deepak-MSFT
"example for mat-select is working fine with IE 11 browser" @Deepak-MSFT Please add style="width: 40px" to the mat-select element and you will see the issue. — Michael

Michael Michael · Accepted Answer · 2019-10-04T04:01:44

This code fixed my issue.

Ref: 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;
  }
}

Angular Material dropdown different between Chrome and IE

1 Answers