¿Cómo abrir Md-dialog en pantalla completa angular4?

Hacemos una revisión exhaustiva cada sección en nuestro sitio web con el objetivo de mostrarte siempre información veraz y actual.

Solución:

este trabajo para mi

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

Fuente

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

Puedes agregar un panelClass al cuadro de diálogo y luego aplique cualquier css solo a ese cuadro de diálogo específico.

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);

Crear clase:

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

Esto funciona para mí:

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

hoja de estilo:

.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;
    
  

Puedes añadir valor a nuestro contenido informacional contribuyendo tu veteranía en los comentarios.

---

---

Utiliza Nuestro Buscador