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;
}
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;
}
Try this and change width:
<mat-select style="width:10px">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With