CODEWITHSUNDEEP
cssangularinternet-explorerangular-material
Michael
Michael

Reputation: 315

Angular Material dropdown different between Chrome and IE

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

In Chrome it looks like this.

select collapsed:

select collapsed

select expanded:

select expanded

Where as in IE:

ie select expanded

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.

Upvotes: 2

Views: 1590

Answers (1)

Michael
Michael

Reputation: 315

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

Upvotes: 2

Related Questions