Material-ui: Body Scrollable Dialog

Created on 14 Jul 2017 · 6Comments · Source: mui-org/material-ui

Problem description

How can I make the Dialog scrollable in v1. I have a modal with a list in it, and the list goes off the page. I would like the ability to scroll down. I would like the scrollbar to be on the main browser window, rather than on the modal itself.

Link to minimal working code that reproduces the issue

Versions

Material-UI: 1
React:
Browser:

Dialog enhancement

Source

everythingspirals

👍8

Most helpful comment

I'm using Dialogs with lists varying from 5-100 items, and initially had the same problem you did. Here's the configuration that allowed me to keep the Dialog and its list from going off the page:

<Dialog
    title="List of Things"
    actions={actions}
    modal={true}
    open={this.props.dialogOpen}
    autoDetectWindowHeight={true}
    autoScrollBodyContent={true}
    repositionOnUpdate={true}
    contentStyle={
        width: '90%',
        height: '90%'
    }
>
    <ListOfThings />
</Dialog>

The only difference from your request is that the scrollbar is in the modal, not the underlying page.

brammitch on 25 Jul 2017

👍5

All 6 comments

That's an interesting issue! That behavior can be very handy when dealing with small height screen on mobile. Yes, it would be great to have this feature.

oliviertassinari on 15 Jul 2017

👍4

@everythingspirals I'm going to have a look at this. Let me know if you're already working on a fix for it.

quiaro on 20 Jul 2017

Why not use a full screen dialog instead? It seems to work fine (except for a bug in the app bar)

fullscreen-dialog

quiaro on 25 Jul 2017

I'm using Dialogs with lists varying from 5-100 items, and initially had the same problem you did. Here's the configuration that allowed me to keep the Dialog and its list from going off the page:

<Dialog
    title="List of Things"
    actions={actions}
    modal={true}
    open={this.props.dialogOpen}
    autoDetectWindowHeight={true}
    autoScrollBodyContent={true}
    repositionOnUpdate={true}
    contentStyle={
        width: '90%',
        height: '90%'
    }
>
    <ListOfThings />
</Dialog>

The only difference from your request is that the scrollbar is in the modal, not the underlying page.

brammitch on 25 Jul 2017

👍5

I created an issue (#10656) that's similar to this. After browsing the other issues, I'm still not sure if this has solved or merged in yet. It seems like a lot of the solutions are focused on using a full screen on mobile. Ideally I'd like to be able to use a body-scrollable Dialog that works on all screens.

I guess one option is to use the full screen Dialog on the v1 branch but I don't really want to have the full screen on large screens.

dlcoffee on 15 Mar 2018

👍1

We are also interested in this feature (for desktop resolutions). Customer may not understand that dialog has a scroll (some browsers hide the scroll when there is no action) and hidden part will never appear. If the customer will scroll the window instead, the dialog's bottom part will be hidden behind the viewport so that it will be more obvious.