/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 vote128 views1 answer
Javascript slider get value react
Javascript React
2 votes134 views5 answers
React native debugger
Javascript React
160 votes334 views6 answers
React install
Javascript React
0 vote134 views1 answer
Could not resolve project :react-native-iap mergedebugassets
Javascript React
0 vote133 views1 answer
Metro server not running react native
Javascript React
1 vote350 views1 answer
Double matrix iteration in react
Javascript React
1 vote143 views1 answer
Tailwind css react craco package.json
Javascript React
1 vote134 views1 answer
React native svg onpress
Javascript React
21 votes164 views6 answers
React native vector icon
Javascript React
1 vote142 views1 answer
Npx create react app Must use import to load ES Module error
Javascript React