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.
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.
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>