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.
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>