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?

Answer 1

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

Answer 2

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