/Javascript/React/React modal scroll 2 overlapping components

React modal scroll 2 overlapping components

Since the modal is absolutely positioned, it is out of the document bounds, in other words the document, does not know how big the modal is and has no idea that it is bigger than the document itself and therefore doesn't scroll.

This can be fixed by giving the modal a fixed height and setting the overflow property to scroll. Try the code below, I just tested it and it works perfectly.

    var customStyles = {
      content : {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)',
        height: '500px', // <-- This sets the height
        overlfow: 'scroll' // <-- This tells the modal to scrol
      }
    };

Similar codes

31 votes297 views1 answer
React router dom npm
Javascript React
0 vote277 views4 answers
React node sequilize
Javascript React
0 vote337 views1 answer
Custom login with facebook button react native
Javascript React
0 vote307 views1 answer
Hooks developed by react native
Javascript React
0 vote324 views1 answer
Onpress not working with usestate react native
Javascript React
6 votes324 views1 answer
Import useHistory react-router-dom version 6
Javascript React
0 vote290 views1 answer
Import ipcRenderer in react
Javascript React
2 votes312 views1 answer
Display image as big as possible react native
Javascript React
0 vote335 views1 answer
Error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent
Javascript React
0 vote416 views1 answer
How to set the id attr to a var in reactjs
Javascript React