Question

How to size the material select dropdown differently than the form field width

I am trying to create a <mat-select> from the @angular/material library where the width of the form field is small (75px) but the drop down menu is larger to accommodate longer text options than are displayed in the form field.

Here is the desired result:

enter image description here

 3  37  3
1 Jan 1970

Solution

 3

Style the <mat-form-field> with the desired width for the form field. Then set the panelWidth attribute in <mat-select> to the desired width or null to size to the largest element in the dropdown list.

<mat-form-field style="width: 75px;">
    <mat-select panelWidth="null">
        <mat-option *ngFor="let d of data">
            ...
        </mat-option>
    </mat-select>
  </mat-form-field>

Material documentation: https://v17.material.angular.io/components/select/api

2024-07-24
Brigadeiro