/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

0 vote299 views1 answer
Take site to top after clicking in react
Javascript React
1 vote283 views2 answers
Use state reactjs
Javascript React
24 votes240 views3 answers
Set port in react app
Javascript React
1 vote262 views1 answer
React spread operator
Javascript React
0 vote277 views1 answer
Connect react with database server
Javascript React
0 vote276 views1 answer
Get position of element in react
Javascript React
0 vote287 views1 answer
How to change currency in react-paypal-button-v2
Javascript React
5 votes248 views2 answers
React native components
Javascript React
0 vote282 views1 answer
Update an object key value in state react
Javascript React
2 votes265 views1 answer
Npm install --save react-native-vector-icon
Javascript React