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

Issue

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.

Solution

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.

Answered By - Faisal