How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file:
import { Component, ViewEncapsulation } from "@angular/core";
import { FormControl } from "@angular/forms";
/** @title Select with multiple selection */
@Component({
selector: "select-multiple-example",
templateUrl: "select-multiple-example.html",
styleUrls: ["select-multiple-example.css"],
encapsulation: ViewEncapsulation.None
})
export class SelectMultipleExample {
toppings = new FormControl();
toppingList: string[] = [
"Extra cheese",
"Mushroom",
"Onion",
// The rest of the array data...
];
}
To set the width, I used the following CSS and HTML:
CSS:
.myFilter .mat-select-trigger {
min-width: 80vw;
}
HTML:
<mat-form-field>
<mat-select class="myFilter" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>However, I want to adjust the height instead of the width. If I modify the CSS to this:
.myFilter .mat-select-trigger {
max-height: 80vh;
}
The height increases for the box but not for the list of items. How can I achieve that, ensuring that the list does not go beyond the number of items in toppingList if it is updated with fewer elements?
After some changes, here's the updated CSS:
.myFilter {
background-color: yellow; /* Added this to check functionality*/
min-height: 85vh;
}
And the HTML:
<mat-form-field>
<mat-select [panelClass]="'myFilter'" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>This adjustment has set the height to 85vh, but I still need the list to be shorter when there are only a few items present.