angular material mat-select drop-down width
Solution 1
For anyone still trying to figure out without making the actual select smaller or wider.
The mat-select-panel uses 100% of the mat-select width plus 32px
min-width: calc(100% + 32px)
You can override this styling with ng-deep:
::ng-deep .mat-select-panel {
min-width: 100% !important;
}
Solution 2
Try this
.mat-select-panel:not([class*=mat-elevation-z]){ min-width: calc(100% + 0px) !important; }
Solution 3
Try this and change width:
<mat-select style="width:10px">
Related videos on Youtube
Meng
2018 - Present Finished my master in Statistics. Quit machine learning. Now I am a developer. :) 2015-2017 Undergraduate Statistic student interested in machine learning and data mining. I always think of how to program easier, cleaner and faster, so I always ask questions like 'is there any simpler way to do it instead of blablabla'. People here are nice and intelligent! I will keep asking and asking and hopefully one day I am able to help others as well :D Cheers!
Updated on September 15, 2022Comments
-
Meng over 1 year
The current drop-down box has width greater than the the width of the line:
Is there a way to get rid of the extra width?
Here is my current code:
html:
<mat-form-field> <mat-select disableOptionCentering placeholder="Choose an option"> <mat-option [value]="option" *ngFor="let option of my_list"> {{ option }} </mat-option> </mat-select> </mat-form-field>
my_list:export const my_list: string[] = [ "a", "b", "c", "d"];
style.css:.mat-select-panel{ margin-left: 15px; margin-top: 28px; }
-
Meng over 5 yearsHi RikG93, I don't think two posts are talking about the same thing. Here I want to reduce the width of the scrollable panel. The answer in the link provides a solution to load more when scrolling down in the scrollable panel.
-
cheesydoritosandkale over 5 yearsDid you ever figure this out? I am trying to do the same.
-
-
Meng over 5 yearsThis moves the location of the mat-select-arrow. Is it possible to have the mat-select-arrow at the end and the width of scrollable panel = the width of the underline?
-
rikg93 over 5 yearsno this change the width, no the location. You could try min-width: calc(100%- 30px) where 30px is an example
-
AlePorro about 2 yearsWorked like a charm for me, thanks!