/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 vote299 views1 answer
What is the use of consrtructors in reactjs
Javascript React
5 votes321 views1 answer
Deploy react js heroku
Javascript React
0 vote274 views1 answer
How to make multiple link using react
Javascript React
0 vote300 views1 answer
News api react native
Javascript React
0 vote289 views1 answer
Dark mode with react hooks
Javascript React
0 vote304 views1 answer
React function runs several times
Javascript React
4 votes290 views1 answer
Import react icons module
Javascript React
1 vote305 views3 answers
React native SafeAreaView
Javascript React
1 vote309 views1 answer
Get current platform react native
Javascript React
0 vote291 views1 answer
Yarn react select
Javascript React