How to change mat-select height (style)? - css

Question

Using ::ng-deep it solve the problem, but it affect all mat-select in the same module, so how can I change mat-select style juste in a specific component?
::ng-deep .mat-select-panel{
max-height: none!important;
}
Edit:
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field >
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

Answer 1

You can do this then,
// Add an ID to the div in the HTML
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field id="search-option-id"> <-- Add the ID Here
<mat-select
[(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by..."
>
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
// In your CSS file, you can do this:
#search-option-id > mat-select { <-- You can do this in the CSS
::ng-deep .mat-select-panel {
max-height: none!important;
}
}

Answer 2

Actually, the mat-select-panel is outside your component, in the .cdk-overlay-container. So you can't change CSS only for your own component's mat-selects.
What you CAN do, is adding a class to the select-panel, and then make a true ng-deep rule
<mat-form-field>
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
panelClass="auto-height" <-- adding class to panel here
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
and in your scss file:
::ng-deep .mat-select-panel.auto-height {
max-height: none;
}
Or even better, add it to your material-overload.scss file if you already have one. If not, add it to your styles.scss file, so you don't use ng-deep at all:
.cdk-overlay-container {
.mat-select-panel.auto-height {
max-height: none;
}
}