Material: md-dialog + not going fullscreen

Created on 6 Jan 2016 · 5Comments · Source: angular/material

chrome

am 1.0.1

http://codepen.io/0101adm/pen/wMJXGJ

works as expected

Source

0101adm

Most helpful comment

@media (max-width: 959px)
md-dialog.md-dialog-fullscreen {
    min-height: 100%;
    min-width: 100%;
    border-radius: 0;
}

md-dialog.md-dialog-fullscreen work on screen < 960px.
Just resize you window or owerride this style.

BIGbuu on 6 Jan 2016

👍2

All 5 comments

Can confirm, the docs say adding the property results in the md-dialog-fullscreen class (or similar) being applied, I've tried using both the property and directly adding the class to my md-dialog element.

cranesandcaff on 6 Jan 2016

@media (max-width: 959px)
md-dialog.md-dialog-fullscreen {
    min-height: 100%;
    min-width: 100%;
    border-radius: 0;
}

md-dialog.md-dialog-fullscreen work on screen < 960px.
Just resize you window or owerride this style.

BIGbuu on 6 Jan 2016

👍2

https://github.com/angular/material/issues/5924

stunaz on 7 Jan 2016

👍1

Anybody knows if there is a more recent option to this?

https://github.com/angular/material/issues/6566#issuecomment-169477258

Thanks.

jmussett2005 on 22 Apr 2018

@jmussett2005 that's the recommended option. See https://github.com/angular/material/issues/5924#issuecomment-159903568 for more details.

From the spec: "Full-screen dialogs: Mobile only: Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens."