CODEWITHSUNDEEP
angularangular-material
hottabych1607
hottabych1607

Reputation: 91

Automatic width mat-option in Angular Material

How to make the mat-option automatically select the width of the longest item in the list.

<div class="col-md-3">
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Дом</mat-label>
    <input (input)="InputBuilding($event)" matInput placeholder="№ дома" formControlName="buildingNumber" required maxlength="5" [matAutocomplete]="autoBuilding">
    <mat-autocomplete panelClass="mat-auto" #autoBuilding="matAutocomplete">
      <mat-option (onSelectionChange)="selectionChange(build)" *ngFor="let build of builds?.result" [value]="build.name">
        <span>{{build.typeShort}}. {{build.name}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Корпус</mat-label>
    <input matInput placeholder="Корпус" formControlName="structure" maxlength="3">
  </mat-form-field>
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Квартира</mat-label>
    <input matInput placeholder="Квартира / Офис" formControlName="flat" maxlength="4" numbersOnly>
  </mat-form-field>
</div>

Photo

Upvotes: 4

Views: 6507

Answers (4)

Simon Dragsb&#230;k
Simon Dragsb&#230;k

Reputation: 2399

A newer and better answer to this question is:

<mat-autocomplete panelWidth="fit-content" ...>

Upvotes: 1

siddhi patel
siddhi patel

Reputation: 11

u may try like this 

.auto-width{
        .mat-form-field {
            width: auto !important;
        }
        .mat-select-value {
            max-width: 100%;
            width: auto;
        }  
    }

Upvotes: 0

hottabych1607
hottabych1607

Reputation: 91

::ng-deep .cdk-overlay-pane {
      width: auto !important;
}

Upvotes: 0

Akash Srivastav
Akash Srivastav

Reputation: 766

Try 

::ng-deep mat-autocomplete {
    width: fit-content !important;
}

Upvotes: 3

Related Questions