/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 vote365 views1 answer
React enzyme mount ReferenceError: is not defined
Javascript React
0 vote414 views2 answers
How to sent react from data in mongodb
Javascript React
0 vote371 views1 answer
Asp.net core react server session
Javascript React
1 vote391 views2 answers
React alert popup
Javascript React
0 vote342 views1 answer
React router history not defined
Javascript React
1 vote355 views1 answer
Toggle drawer react native
Javascript React
0 vote374 views1 answer
Fullcalendar edit event modal react
Javascript React
0 vote386 views1 answer
How to replace strings with react components
Javascript React
0 vote333 views1 answer
Reference hook in react
Javascript React
7 votes394 views3 answers
How to update a state with an array react
Javascript React