angular material mat-select drop-down width

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;
}

Continue reading...