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:
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>
Documentation: Material documentation: https://v17.material.angular.io/components/select/api