I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container
? which is hidden. Only added when I click the modal and when you open the chrome dev tools you can see the md-dialog-container
appearing. Do include how to override the rest of the styling.
Much appreciate with some help. Thanks.
From the official documentation:
Styling overlay components
Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.
You can override the default dialog container styles by adding a css class in your global styles.css
. For example:
.custom-dialog-container .mat-dialog-container {
/* add your styles */
}
After that, you'll need to providies you css class as a panelClass
parameter to your dialog:
this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })
Read this official documentation for more information.