CODEWITHSUNDEEP
angularangular-material2mddialog
Shailesh Ladumor
Shailesh Ladumor

Reputation: 7252

how to open Md-dialog full screen angular4?

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?

Upvotes: 30

Views: 33796

Answers (3)

Jorgen
Jorgen

Reputation: 440

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

Upvotes: 7

San Jaisy
San Jaisy

Reputation: 17128

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

Upvotes: 50

Ketan Akbari
Ketan Akbari

Reputation: 11287

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

Upvotes: 24

Related Questions