Cannot adjust the min-width of MatSelect select panel

[yuriydetsyk]

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.

[randysimplist]

I am having the same exact problem.

It seems like the transformPanel animation should use a variable that is fed via overlayDir parameters to compute the additional padding.

Something along the lines of the following...

state('showing', style({ opacity: 1, minWidth: 'calc(100% + {{ padding }})', // 32px = 2 * 16px padding transform: 'scaleY(1)' }), { params: { padding : '32px' } }),

[schroedermarius]

Bumping this, because it is still a big problem.

[efagerberg]

I am also struggling with this problem. It seems like disableOptionCentering is not as much of an option when this bug exists. For now people can see this workaround https://stackoverflow.com/questions/48563447/angular-material2-select-component-alignment, which is not ideal as it strips animations and requires !important usage and using a global style sheet.

[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",

[Debxit]

Bumping this, because it is still a big problem.

[yBussi]

Any solution how to solve width 'Jumping' in Chrome?

[Ash1994]

Hello guys
Did you get any solution on 'Jumping' problem in chrome?

[yuriydetsyk]

@AshwinMahatkar, I have previously added a temp fix in the issue description, it might help you:
https://stackblitz.com/edit/angular-mat-select-issue-tempfix

[Ash1994]

@yuriydetsyk , I got it Thanks.
There is one issue with chrome browse.
After this changes I am getting panel jumping problem. Opening panel is getting jump from right to left. Do you have any idea about this one?

[Nikolay-Uvarov]

I have faced as well.
I have found a solution: https://stackoverflow.com/questions/53092399/mat-select-panel-min-width

[King2231]

Facing the same issue. I tried removing animation for avoiding jumping problem but then the select dropdown does not open in edge and safari.

[ahnpnl]

I ran into the jumping issue as well. The workaround from stackblitz works pretty well but I would love to see a fix from angular material team.

[Spawnrad]

Same issue for me jumping left side :(