Cannot adjust the min-width of MatSelect select panel

What is the expected behavior?

When trying to adjust min-width property of the select panel, it should be overriden properly for customization purposes: .mat-select-panel { min-width: 100% !important; }.

What is the current behavior?

After applying changed min-width property, the select panel has “jumping” width when showing/hiding.

What are the steps to reproduce?

Min-width override causes jumping: https://stackblitz.com/edit/angular-mat-select-issue Temporary fix that I made: https://stackblitz.com/edit/angular-mat-select-issue-tempfix

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

"@angular/material": "7.0.1", "@angular/animations": "7.0.1" "@angular/cdk": "7.0.1"

Is there anything else we should know?

Details I found that the most possible reason for such “jumping” effect is the “transformPanel” animation (see @angular/material/esm2015/select.js, lines 45…65) It uses breakpoints with different minWidth values. After commenting them out I was able to remove the “jumping” effect.

Workaround

• My temporary workaround uses some dirty CSS hacks by hiding the overflow on the .cdk-overlay-pane, so it affects clipping of scrollbar, and that’s not good at all.
• Another possible hack might be overriding the animation, but it’s also not clean at all.
• It will be really great to see a working solution, when we talk about customizable width of select panel.

[prajaktashah]

still not working with following specifications: “@angular/animations”: “^7.2.13”, “@angular/cdk”: “^7.2.2”, “@angular/core”: “^7.2.13”, “@angular/material”: “^7.2.2”,

[mmalerba]

Closing since it seems to be fixed