/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 vote241 views1 answer
Flipper semantic issue react native
Javascript React
0 vote260 views1 answer
Scrollbar automatically scroll down as new divs are added reactjs
Javascript React
0 vote242 views1 answer
Scroll to a input on button click react native
Javascript React
0 vote277 views1 answer
React scroll to top on page refresh - don't restore position
Javascript React
0 vote223 views1 answer
Jsx tag with children react js
Javascript React
3 votes260 views1 answer
React export
Javascript React
1 vote234 views1 answer
Add value to state array react native dispatch
Javascript React
0 vote233 views1 answer
How to clear text ibput after message sent react native
Javascript React
0 vote234 views1 answer
Altenrive for react native
Javascript React
0 vote228 views1 answer
Const userMessage Reaction = new UserMessage Reaction({ _id: mongoose.Types.ObjectId(), userId: "USERID", userName: "TESTUSERNAME", messageId: "TESTMESSAGEID", time: "TESTTIME" });
Javascript React