/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 vote151 views1 answer
Programmatic title react
Javascript React
-2 votes153 views1 answer
Reactjs cut part of string
Javascript React
1 vote159 views1 answer
How to position View absolute react native
Javascript React
0 vote99 views1 answer
Fixed menu reactjs
Javascript React
3 votes156 views1 answer
React native nox emulator
Javascript React
0 vote159 views2 answers
Why navlink in react router always active
Javascript React
0 vote161 views1 answer
React load after scrolling
Javascript React
0 vote153 views1 answer
Test one function in react class
Javascript React
16 votes139 views3 answers
Loop in react depending on number
Javascript React
0 vote159 views1 answer
V4 history for react action or api calls
Javascript React