/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

1 vote377 views1 answer
Interpolation react
Javascript React
0 vote326 views1 answer
@testing-library/react-native switch
Javascript React
0 vote324 views1 answer
React Update a label when rate moves "quietly"
Javascript React
0 vote337 views1 answer
${product} meaning in react js
Javascript React
0 vote319 views1 answer
Scroll load react
Javascript React
0 vote334 views1 answer
Edit json text react
Javascript React
8 votes334 views1 answer
React-fragment
Javascript React
0 vote338 views1 answer
React event stop propagation
Javascript React
32 votes310 views6 answers
Usestate react
Javascript React
0 vote355 views4 answers
React tutorial for beginners
Javascript React