/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

26 votes325 views6 answers
React redirect to url
Javascript React
36 votes279 views2 answers
Ref hook in react
Javascript React
0 vote309 views1 answer
React Fontawesome Thumbs Up/Down rating (showcases background icon hiding)
Javascript React
0 vote302 views1 answer
Change env location react
Javascript React
0 vote300 views1 answer
Get element ref react
Javascript React
0 vote323 views1 answer
Settimeout react native focus text input
Javascript React
0 vote334 views1 answer
Detect if user is online react
Javascript React
0 vote309 views1 answer
React native header height
Javascript React
1 vote298 views1 answer
I18n react meta description
Javascript React
0 vote290 views1 answer
React padding at bottom svg
Javascript React