how to open Md-dialog full screen angular4?

Question

I am trying to pass some property value using config. But dialog not open into full screen.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

How can I open dialog full screen based on resolution?

Comp

Answer 1

You can add a panelClass to the dialog and then apply whatever css just to that specific dialog.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
    panelClass: 'full-screen-modal',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

Create class:

.full-screen-modal .mat-dialog-container {
  max-width: none;
}

Cronk

This code worked for me with maxWidth Set to 95vw dialogConfig = { position: { top: '10px', right: '10px' }, height: '98%', width: '100vw', maxWidth: '95vw', panelClass: 'full-screen-modal' }; – Mammon

Answer 2

This work for me

let dialogRef = this.dialog.open(CustomerGarageAddEditComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '100%',
      width: '100%'
    });

Source

https://github.com/angular/material2/issues/9823

Pettifog

Actually this solution puts the dialog completely fullscreen. – Spraddle

Thanks, this is the simpliest solution. – Yelena

Answer 3

This works for me:

openTwigTemplate(): void {
  const dialog = this.dialog.open(TwigDialogComponent, {
    disableClose: true,
    panelClass: ['full-screen-modal']
  });
}

style sheet:

.full-screen-modal {
  max-width: unset !important;
  width: 100%;
  height: 100%;
  .mat-dialog-container {
    max-width: 100vw;
    max-height: 100vh;
    height: 100%;
    width: 100%;
    .mat-dialog-content {
      max-height: unset !important;
    }
  }
}

Jacquez