Angular5 mat-menu modifying padding and width attributes? - html

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