2

I can't change padding of mat-menu-content. I can't access to it through simple css or ::ngdeep. Any ideas how to do it? I'm quite new to angular :(

everything is inside:

<div class="...">
<mat-menu>
  //The rest of code is here, some *ngFor, sub menu
<mat-menu>

I want to make mat-menu-content padding 0px but I can't do it through simple css or ::ngdeep

.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 8px;

}

r2d23
  • 43
  • 1
  • 4

2 Answers2

2

To avoid using ngdeep, try this:

  1. Apply a class to your menu (using the 'class' input alias: <mat-menu class="my-class">)

  2. In your css, override angular's .mat-menu-content:

    .my-class .mat-menu-content { padding: 0 !important; }

Obviously pick whatever padding you need. This works for me.

RocketMan
  • 441
  • 4
  • 15
1

you can change mat-menu-content by adding

::ng-deep .mat-menu-content{
  padding:0px !important;
}

working demo

ram12393
  • 1,284
  • 3
  • 14
  • 29
  • `ng-deep` is deprecated, see official docs: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Qortex Jan 05 '20 at 11:39
  • yeah, In the latest Angular it has been deprecated and also please check when I answered the question. – ram12393 Jan 05 '20 at 16:07
  • Yeah sure, no offense. Was just pointing that out since I ended up here with Google. It's been a while since it is deprecated though (example: https://stackoverflow.com/questions/49859784/ng-deep-going-to-be-deprecated-any-alternatives) – Qortex Jan 05 '20 at 17:25
  • I added an answer that does not need ::ng-deep, but rather uses !important and css selector specificity. – RocketMan Sep 17 '20 at 12:48
  • the .class .mat-menu-content does not work. – chitgoks Aug 08 '23 at 06:37