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.