Angular2 mat-select match dropdown menu width

Question

I use angular2 mat-select control, and try to change its dropdown list menu width and position to match parent element (by default it is wider and overflows element to both sides in few pixels).

I didn't see such option in materials site and overriding by css is complex since values depends on element width (need it for all select menus in my site).

Code example:

<mat-form-field class="col-sm-8 grey">
  <mat-select [(value)]="selectedGroup">
    <mat-option *ngFor="let item of groups" [value]="item">{{item.value}}</mat-option>
  </mat-select>
</mat-form-field>

Pardeep Jain Pardeep Jain · Accepted Answer · 2018-04-26T05:22:06

In order to facilitate easily styling the dropdown panel, has a panelClass property which can be used to apply additional CSS classes to the dropdown panel

<mat-form-field>
  <mat-select placeholder="Panel color" [formControl]="panelColor"
              panelClass="example-panel-{{panelColor.value}}">
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>

Source of information

Angular2 mat-select match dropdown menu width

1 Answers