By default, a mat dialog container has a padding of 24px on each side. However, in some situations, you might need to get rid of this default padding and change it according to your need.
To remove this default padding from the mat dialog container, first, you have to pass a custom panel class to the mat dialog as a second parameter to the MatDialog.open() method.
openDialog(){
// Open dialog box
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'60%',
height: '50%',
panelClass: 'my-panel-class' // <- Add a custom panel class
});
}
Now, we will use the above panel class inside our global styles.css file to change the padding of the mat dialog container box.
Open your styles.css file and put the below code there. This will set the mat dialog container’s padding to 0px.
.my-panel-class .mat-dialog-container{
padding: 0px;
/* Add more styles */
}
You can not only change the padding but also add any custom styles to the mat dialog container using the above method. And the interesting thing is that it will only affect those mat dialogs where you are passing that panel class. The other mat dialogs will remain unaffected.
Try adding some more styles to the mat dialog:
.my-panel-class .mat-dialog-container{
padding: 20px 10px;
background-color: aquamarine;
color: rgba(0,0,0,0.8);
font-style: italic;
/* Add more styles */
}
