Question

152

How to make a material-ui Modal scrollable

rated 0 times [ 153] [ 1] / answers: 1 / hits: 45933 / 6 Years ago, thu, december 27, 2018, 12:00:00

I've created a Modal and put some text in it describing my app and how to use it, but the text overflows the Modal and so the top and bottom of the text aren't visible. I'd like to make the component scrollable so that my text isn't running off the ends of the page.

// The styling for the modal

const styles = theme => ({

    paper: {

        position: 'absolute',

        width: theme.spacing.unit * 130,

        backgroundColor: theme.palette.background.paper,

        boxShadow: theme.shadows[5],

        padding: theme.spacing.unit * 4,

    },

});





function getModalStyle() {

    const top = 50

    const left = 50



    return {

        top: `${top}%`,

        left: `${left}%`,

        transform: `translate(-${top}%, -${left}%)`,

        overflow: scroll

    };

}

// The actual modal

<Modal

    aria-labelledby=simple-modal-title

    aria-describedby=simple-modal-description

    open={this.state.modalOpen}

    onClose={this.handleModalClose}

>

    <div style={getModalStyle()} className={classes.paper}>

        <MyLongTextComponent/>

    </div>

</Modal>

I'd like for this to have scroll functionality that's independent of the actual page behind it. I haven't found much help on the internet, so any pointers would be very helpful! Also, if a Modal is the wrong component to use in this situation, please let me know. I'm moderately new to React and material-ui, so if there's a better way I'd love to learn how.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elishaannac

Add To Favorites

Follow

Total Points: 28

Total Questions: 97

Total Answers: 101

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

answered 6 Years ago minab · Accepted Answer

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>