Customizing Mat-Select Width - Angular 11

Question

I'm new to Angular/Angular Material so I'm not sure if this is code I need to write myself or its already built in a specific way. I'm having a problem with the drop down of the mat-select, the panel that pops up when you click select is not matching the width of the select drop down bar with the arrow. I learned from this question: Styling mat-select in Angular Material that the width of the panel is always equal to the width of the select element, but thats not the case for me. Is there a way to fix the width of the drop down if its not the same size?

Please add some code for us to debug. Without seeing the code it is not easy to help you with the solution — Srikar Phani Kumar M, Jun 23 '21 at 20:36

score 1 · Answer 1 · answered Jun 23 '21 at 21:40

That depends on the width of the text options you have on your mat-options.

The panel always takes the width of the max text length. so if the max text length is > select input element width, then the panel should be > select element width.

To better understand: -Example with: max text width < select element width: https://stackblitz.com/angular/olkexjgqxpk?file=src%2Fapp%2Fselect-custom-trigger-example.ts

-Example with max text width > select element width: https://stackblitz.com/edit/angular-4bk5ns?file=src%2Fapp%2Fselect-custom-trigger-example.html

score 0 · Answer 2 · answered Jun 24 '21 at 12:36

I add the following two rules to my top level style sheet so I never have to deal with the overflow in my select list

.cdk-overlay-pane {
     width: fit-content !important;
}

.mat-select-panel {
     max-width: unset !important;
}

https://stackblitz.com/edit/angular-pqtiem?file=src%2Fstyles.scss

Customizing Mat-Select Width - Angular 11

2 Answers2