/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

-2 votes307 views2 answers
React gsap
Javascript React
3 votes368 views3 answers
How to remove global react-native-cli package
Javascript React
0 vote353 views1 answer
OnPress image react native
Javascript React
1 vote341 views1 answer
React native could not get batchedbridge
Javascript React
1 vote341 views1 answer
Iconify react
Javascript React
0 vote344 views1 answer
Detecting change in animated value react native
Javascript React
126 votes537 views4 answers
Npm create react app
Javascript React
0 vote351 views7 answers
Convert css box shadow to react native
Javascript React
0 vote360 views1 answer
React shadow
Javascript React
2 votes346 views2 answers
React get url querystring
Javascript React