How to edit default css for .mat-select-panel in angular material?

Question

The default select box of angular material is using the following class:

.mat-select-panel{
    min-width: 112px;
    max-width: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 230px;
    min-width: 100%;
}

However, I want to change the max-height to something else? How can i do so?

Coderer · Accepted Answer · 2018-02-01 10:26:58Z

3

The API for mat-select has been updated and now allows you to specify additional classes for your panel using the panelClass input. You can then override styles in a global class definition.

answered Feb 1, 2018 at 10:26

Coderer

27.6k32 gold badges106 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vpap Over a year ago

Can you provide an example? Thanks.

vpap Over a year ago

I see my custom class added when using <mat-select panelClass='my-class' ...> through firefox web tools but I don't see styles applied.

Collectives™ on Stack Overflow

How to edit default css for .mat-select-panel in angular material?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related