CODEWITHSUNDEEP
angular-materialoverlayangular-cdkangular-cdk-overlay
Niccolò Boddi
Niccolò Boddi

Reputation: 33

How to do a Material Select that not overflow his container

I developed a form that contains multiple fields: input or select. The problem is that the container of this form has a well-defined height, and when I click on the select, it overflows. I would like the select to occupy all the space it wants, but not to overflow with respect to the container of the form!

I have seen that when you click on a select and open the options it creates an overlay material. This overlay does not belong to the select so I can't tell it to have a height of 100% because it takes up 100% of the entire page.

template

<div class="container">
    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

style

.container {
   height:100px;
   overflow: hidden;
}

Has anyone ever encountered this? Thanks

Upvotes: 0

Views: 53

Answers (1)

Naren Murali
Naren Murali

Reputation: 57921

You can try the native HTML select mode of mat-select, which does not have overlay.

<div class="container">
  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <select matNativeControl>
      <option value="" selected></option>
      <option value="volvo">Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </mat-form-field>
</div>

Stackblitz Demo

Upvotes: 0

Related Questions