Components: dialog max width is set to 80 vw

[akomarovsky]

Bug:

can't have more than 80% width for dialog

What is the expected behavior?

have the width to cover more than 80%

What is the current behavior?

the maximum width is to 80% of the viewport

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

"@angular/material": "2.0.0-beta.2"

Is there anything else we should know?

I saw that the class of the element "md-dialog-container" is set to "mat-dialog-container". the class has style max-width: 80vh. This cause the issue

[willshowell]

Was confused by this as well. If it helps, here's a plunker showing the issue http://plnkr.co/edit/e4Kx2GzQoGwQUn4A7utq?p=preview

[akomarovsky]

as a temporary solution I fixed it by adding to styles.css (the main style file):

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

Better solution will be welcome

[gedclack]

in addition to @akomarovsky temporary solution,
on xs screen if you need 100% available width use this

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

to set the width beautifully on xs(phone) screen put this on the outer most container (I am using angular/flex-layout)
ngStyle.gt-xs="width: 380px" ngStyle.xs="width:85vw"

[jelbourn]

@crisbeto do you know where the 80vw came from?

[crisbeto]

I believe that it was a combination of looking at what M1 used and eyeballing it, because we need some cut-off point to prevent the dialog from getting too wide.

[emilio-martinez]

@crisbeto #7488 addresses this by shifting the responsibility of max-width to Overlay config via Dialog config

[adisreyaj]

If you want to have a fullscreen dialog on mobile, just add this to the styles.scss:

@media (max-width: 600px) {
  // Making the modal fullscreen in mobiles
  .cdk-overlay-pane {
    width: 100vw !important;
    height: 100vh !important;
  }
}

So the modal will have the following width and height on desktop and in mobile it will be fullscreen.
This is my openDIalog function in controller:

const dialogRef = this.dialog.open(DialogComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      width: '750px',
      height: '85vh',
      data: 
    });

[HangLoop]

@adisreyaj The address bar will cover the content on ios safari

[tmtron]

@adisreyaj I guess, you want to use max-width & max-heigth for cdk-overlay-pane
otherwise menus, etc would always stretch to 100%

When using flex-layout the max-width media query should be 599 (ref)

so here is what I use:

@media (max-width: 599px) {
  // modal dailogs should be able to fill the fullscreen if required
  .cdk-overlay-pane {
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}