CODEWITHSUNDEEP
htmlcssangulartypescriptangular-material
D.Zet
D.Zet

Reputation: 779

Angular Material: multiple mat-menus - how to override their widths when each of them has to be different?

I have a situation where multiple mat-menus should be openable, the problem is that they can't have the same width.

enter image description here

So there are four mat-menus, one should be narrow, the other wide.. and I was able to change the widt only using ::ng-deep but it affects all of them.

I was searching for a different solution and found something like this:

  1. add class to mat-menu element:
<mat-menu #menu="matMenu" class="mat-menu-main" xPosition="before">
  1. try to do something like this in its css:
.mat-menu-panel.mat-menu-main {
  width: 20rem;
  margin-top: 4px;
}

Every other solution that I found is with ::ng-deep which I can't use.. Can someone help me with this?

Upvotes: 0

Views: 599

Answers (1)

Sam Scholefield
Sam Scholefield

Reputation: 1250

Assigning a class and then controlling the width using the class will work (it is the method I use).

The class must be defined in your global style sheet, not at the component level.

Upvotes: 1

Related Questions