Material-ui: [Dialog] Fullscreen

[timarney]

Is there a way for the dialog to go fullscreen (no overlay)? this would be handy for a phone view where space is limited.

[shaurya947]

Seems like a duplicate of #1467

Feel free to re-open and comment if you're trying to do something else.

[timarney]

1467 works for the width. I'm also looking to so max out the height.

I tried

contentStyle={{width: "100%", maxWidth: "none",height:"100%",maxHeight:"100%"}}

I also tried

contentStyle={{width: "100%", maxWidth: "none",height:"2000",maxHeight:"2000"}} //set to a high number for testing

Roughly something like this:
https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs

[shaurya947]

@timarney see the screenshot below:

Dialogs will expand according to the size of the content. As for manually setting the height to the entire screen, I haven't yet found a way to do so _without_ modifying the source. I wouldn't recommend this but you can set the height of the paper element here like so:

paper: {
        background: this.state.muiTheme.rawTheme.palette.alternateTextColor,
        height: '1000', //or whatever you like
      },

[timarney]

Okay good to know.

Looks like I can set the container position by passing in paddingTop + turning off repositionOnUpdate
https://github.com/callemall/material-ui/blob/master/src/dialog.jsx#L364

Based on your screen any idea what pushes the 'white' part of the Dialog down i.e. not covering the menu?

[timarney]

Found it ... I can move it up by passing a negative number for top.

I should be able to get working now.

Thanks for the help.

[shaurya947]

:+1:

[lefnire]

@timarney could you chance post a sample of how you pulled it off? looking for the same m'self

[timarney]

@lefnire I took a look and that part of the code (referenced) was either removed or was part of a demo ... anyway I couldn't track it down.

Did you take a look at https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.js ?

That example is for the width but maybe try passing a value for 'top' in the customContentStyle variable.

[alecperkey]

bodyStyle prop in Dialog will have height disappear and maxHeight overwritten with the calculated maxheight available via dialog.js

It automatically gives max-height via window.innerHeight - 2 * 64 for dialog padding

if you have title or actionbuttons it will remove respective sum of the heightoffset values in componentDidMount via a ref

since I have non-standard padding and passed nonstandard value for contentStyle top (for desired space maximizaiton/fullscreen mode) the window.innerHeight -2 * 64 part is taking an extra 128 pix off my necessary value.

i just added a min-width of my calculated values and pass into bodyStyle and it works.. because min-height is after in teh inline style. i worry some browser might take priority over max-height in the inline style and thus waiting for better solution here hopefully

[JarLowrey]

I used the Modal util (https://material-ui.com/utils/modal/) to create a full-height ModalImage