How to make a material-ui Modal scrollable

For anyone looking for a quick answer to this, here's the solution I found:

<Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
                style={{ overflow: 'scroll' }}
              >

       <div style={
       zIndex: 10,
       position: absolute,}>
{/*your content here*/}
       </div>

</Modal>

So only 2 simple steps...

1. Make modal overflow scrollable

   <Modal
                style={{ overflow: 'scroll' }}
              >
   

2. Update styles for every direct child of the modal. You need to add these 2 attributes at least:

   <div style={
   zIndex: 10,
   position: absolute,}>
   

Then you can use css to reposition the content with the top or left properties, or customize the container as you want. No need to switch to the Dialog component to solve this.

You need to use 'overflow = scroll' for modal style.

Below is example code to get scrollable material-ui modal. withStyles is used to apply style for modal in this example.

• image example of material-ui scrollable

• material-ui usage of withstyles

  const styles = theme => ({
    modalStyle1:{
      position:'absolute',
      top:'10%',
      left:'10%',
      overflow:'scroll',
      height:'100%',
      display:'block'
    }
  });
  <Modal open={this.state.open4} className={this.props.classes.modalStyle1}>
    <div>
      <Button size="small" color="primary" variant="contained" onClick={this.closeOrder}>
        Close
      </Button>
      {this.getPics()}
    </div>
  </Modal>
  

I know this question had already been answered but I found the checked reply as not complete.

In order to make a proper Modal you will most likely want it to have a max height and to be divided in 3 main sections:

• Header
• Content
• Footer (optional)

If you have a long list of element in the content (i.e. a form), setting overflow: 'scroll' to modal will lead to two main issues:

• maxHeight will only be applied to container while the rest of the content will be still visible underneath
• When the user will scroll, the header will also scroll out of sight

A closer-to-production example involving only header and content would then be:

const styles = theme => ({
  modal:{
    position:'absolute',
    top:'10%',
    left:'10%',
    overflow:'hidden',
    height:'100%',
    maxHeight: 500,
    display:'block'
  },
  header: {
    padding: '12px 0',
    borderBottom: '1px solid darkgrey'
  },
  content: {
    padding: 12,
    overflow: 'scroll'
  }
});

const { classes } = this.props
<Modal open={this.state.open}>
  <div className={classes.modal}>
    <div className={classes.heading}>
      <h4>Your Title here</h4>
    </div>

    <div className={classes.content}>
      <Button size="small" color="primary" variant="contained" onClick={this.closeOrder}>
        Close
      </Button>

      {this.getPics()}
    </div>    
  </div>
</Modal>

Beside being better formatted, this solution has also two main differences that solve the real-life issues explained above:

• Modal has overflow: hidden, hiding everything outside its box
• Content has overflow: scroll, which doesn't skyrocket the header away and it's what we are looking for

Hope this helps!

You will have better luck using the Dialog component. Modal is a lower-level construct which Dialog leverages. You can find Dialog examples in the component demos section.