Angular5 mat-menu modifying padding and width attributes?

Question

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 ?

Answer 1

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;
}