Angular Material 2 : How to overwrite Dialog max-width to 100vw?

Question

I am trying to create 100% width Dialog. But As the original settings, it is restricted to 80vw.

.mat-dialog-container{   max-width:80vw; } 

I have tried following ways to overwrite this value. But they weren't successful.

.mat-dialog-container {   max-width: none;   width: 100vw;   height: 100vh; } 

And

.mat-dialog-container {     max-width: none !important; } 

Someone please advise me how to overwrite 80vw to 100vw. Thank you.

Answer 1

Add a css class in your global styles.css e.g.

.full-width-dialog .mat-dialog-container {   max-width: 100vw !important; } 

.. then provide the panelClass to your dialog:

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'}) 

Read this documentation.