IE11: Width of select Panel is too low

[Sabartius]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The Width of the select-panel should be as large as in other Browsers, so that especially longer options can be read.

What is the current behavior?

The select panel is way shorter, so that longer options are truncated early. On opening the Select Panel you can even see, that the width gets adjusted from a wider width to a lower width in a split of a second.
In IE11:

In Chrome 67:

Another point is the invisible part of the select-panel, the "cdk-overlay-pane", it's width is now much wider, so that you cannot close the panel by clicking next to it, because there is no backdrop yet

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-mm2na2?file=app/app.component.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

The stackblitz is build using Angular 6.0.x and Material 6.2.0. But at least lower 6.x.x Versions of Material are affected too.

Is there anything else we should know?

[macjohnny]

same here, it appeared after upgrading from 5.2.0 to 6.2.1

[macjohnny]

the issue arises from an inline css-property that is set on the .mat-select-panel element:
min-width: calc(100% + 32px);

Changing this in the developer tools to
calc(100%) or 100% or removing it results in the correct width of the panel, except for 32px missing:

[macjohnny]

I found the culprit:
by changing the css-property display: flex to display: block on the .cdk-overlay-pane element, the width is calculated correctly with calc(100% + 32px):

so a quick workaround is to set

.cdk-overlay-pane {
  display: block;
}

[macjohnny]

@crisbeto the display: flex property that causes the issue with IE11 was introduced here:
https://github.com/angular/material2/pull/9153/files#diff-92ba68fc80d777fef8ca0e933f6d084eR62

However, I don't understand in which situation the max-width: 100% of the .cdk-overlay-pane has an effect.

I filed PR #11801 that sets display: block whenever a cdkConnectedOverlayMinWidth is set, since the min-width causes the max-width: 100% to be overridden if it exceeds the max-width.

[macjohnny]

@crisbeto another solution that works it to wrap the content with a <div style="flex-basis: 100%"></div>, resulting in the correct width of calc(100% + 32px) of the .mat-select-panel.

[yogeshgadge]

I am going with this:

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

[samudra77]

Awesome. This worked well.

[striky1]

I think that problem is with flex-item which ignore min-width, so, this works for me too:

/* *** Material Classes *** */
.cdk-overlay-pane {
  /** IE 11 fixes */
  .mat-select-panel {
    flex: 1 0 auto;
  }
}

[macjohnny]

@striky1 great solution, I updated the PR #11801 accordingly, as it is only a minimal change and works in all browsers.

[evoltafreak]

@macjohnny Seems like the upper solution of @striky1 doesn't work properly in IE11:

Seen: https://angular-material2-issue-63dnhb.stackblitz.io/

The hacky solution of @yogeshgadge does work fine.

[superxcgm]

It's not a good idea to change the display of .cdk-overlay-pane to block, because it will let mat-dialog no longer in the center of screen in IE11.

[zhaparoff]

It seems like it is still broken (or regression was introduced recently).
I've faced the same issue with drop-down panel width in IE 11 using the latest versions of Angular and Material Components:

    "@angular/core": "8.2.4",
    "@angular/material": "8.1.4",

Fork of original repro: https://stackblitz.com/edit/angular-material-issue-nt6g9o

The following fix worked for me:

  .cdk-overlay-pane {
    display: block;
  }

while the next one did not:

  .mat-select-panel {
    flex: 1 0 auto;
  }

But I don't want to introduce any issues to mat-dialogs, which I'm using as well in my project.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}