2

Today I have this code, basically when I click on Details button it opens a mat-menu but somehow I can not modify padding or width values of the menu : 

<div id="box-upload" [hidden]="hiddenBoxUpload" *ngIf="filesExist">
    <button mat-raised-button color="primary" [matMenuTriggerFor]="listFiles">Details</button>
    <mat-menu class="filesList" #listFiles="matMenu">
        <div *ngFor="let key of listkey">
            <div *ngIf="detailsExist">
                <!-- some stuff like mat-progress-bar and span>
            </div>  
        </div>
    </mat-menu>
</div>

css code : 

.filesList {
   width: auto;
   padding: 15px;
}

What are the ways to change default padding and width of a mat-menu ?

Logan Wlv
  • 3,274
  • 5
  • 32
  • 54
  • Make sure your 'filesList' class is defined in your global style sheet. – G. Tranter Nov 19 '18 at 15:22
  • Let's say I have myComponent.ts and myComponent.html and myComponent.css, having 'filesList' in the myComponent.css file is not enough ? (of course in the .ts I have styleUrls: ['myComponent.css'] ) – Logan Wlv Nov 19 '18 at 15:26
  • Yes - that's what I said - make sure your class is defined in the global style sheet. The overlay container (menus, dialogs, ...) is outside the DOM of the component, so the component's style is not applied. – G. Tranter Nov 19 '18 at 15:29
  • Oh ok I thought you meant the style.css, I will try to directy add style inside then. – Logan Wlv Nov 19 '18 at 15:31
  • adding didn't make it work – Logan Wlv Nov 19 '18 at 15:33
  • Global style = style.css - if that's your application's main style sheet. – G. Tranter Nov 19 '18 at 15:33

1 Answers1

6

You can either put the following in your global styles.css

.mat-menu-content {
    padding: 30px;
}

Or you can use ::ng-deep in your component style sheet 

::ng-deep .mat-menu-content {
    padding: 30px;
}

Either solution above will allow you to modify the default padding of all mat-menu's in your project.

Per this SO answer, until an alternative or replacement is provided for ::ng-deep the recommendation is to continue using it...

What to use in place of ::ng-deep

If you want to control only a specific mat-menu you will need to use your custom class in your CSS selectors

::ng-deep .filesList .mat-menu-content{
    padding: 30px;
}

Revision

To adjust the width of the mat-menu without creating a scroll bar you need adjust the width of the root container cdk-overlay-pane... by adjusting the width of the mat-menu-content you are making that container wider than the root container, and because it is within the root container cdk-overlay-pane it creates a scroll bar by design. Try the following to widen the mat-menu without creating a scroll bar.

::ng-deep .cdk-overlay-pane .filesList{
    min-width:600px;
}
Marshal
  • 10,499
  • 2
  • 34
  • 53
  • And also for the width it works well, but there is alway a X scroll bar even with overflow: hidden !important; does there is anyway to hide the scroll until it reach the width I set? – Logan Wlv Nov 20 '18 at 08:53
  • I tried this with width of 600px : ::ng-deep .listFiles .mat-menu-panel { max-width: 600px !important; } But it does not change the max-width parameter. – Logan Wlv Nov 20 '18 at 09:10
  • 1
    Please see revision on adjusting min-width to 600px on the root container without creating a scroll bar. – Marshal Nov 21 '18 at 15:10