Angular Material dropdown width change

Question

I am using the Angular Material dropdown. It seems that the UL list element depends on button width. I have attached the button and dropdown. I want to change the drop-down width more than a button. In the button I only type "Create" and in the dropdown, I want to type "Create Document", "Create PDF". Now I am getting button width size dropdown. so drop-down content not view properly. how change the drop-down width.

Roy · Accepted Answer · 2020-12-18 16:02:58Z

5

Angular Material already provides a solution for this.

mat-select provides one attribute called "panelClass"

Through which we can change width of dropdown panel like this:

In style.css:

.panel-custom-width {
    width: 300px !important;
    max-width: unset !important;
}

In your component:

<mat-select name="countryString" panelClass="panel-custom-width" [(value)]="selectedCountry">
    <mat-option [value]="'GB'">Great Britain</mat-option>
    <mat-option [value]="'US'">United States</mat-option>
    <mat-option [value]="'CA'">Canada</mat-option>
</mat-select>

edited Dec 18, 2020 at 16:02

Roy

8,1295 gold badges29 silver badges49 bronze badges

answered Dec 16, 2020 at 4:47

Mayur Kukadiya

2,8173 gold badges35 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

Angular Material dropdown width change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related