Width of mat option inside mat select is not proper

Question

I think this is simple for many of you, but I am unable to figure it out.

I am using mat-select inside a form, when I want to select the option from the list, the options width is getting into 100%. But It should be upto the select box.

Here is the snapshot of the options width,

and here is the HTML,

<mat-form-field class="form" appearance="outline">
          <mat-select formControlName="paymentType" placeholder="Type" (selectionChange)="onChange($event)">
            <mat-option *ngFor="let payment of paymentTypes" [value]="payment.value">
              {{payment.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>

I want the width of option to just appear below the select box.

Please help me.

Tyler Pollen Tyler Pollen · Accepted Answer · 2019-06-18T09:23:45

I think adding a "max-width" style directly to the mat-option node will be enough to fix your problem.

Width of mat option inside mat select is not proper

1 Answers