/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

3 votes130 views1 answer
UseNav react router
Javascript React
0 vote207 views1 answer
Disable autocomplete in react fields
Javascript React
13 votes169 views3 answers
React native conditional rendering
Javascript React
0 vote132 views1 answer
React props change
Javascript React
1 vote139 views1 answer
How to create a button with react
Javascript React
17 votes122 views5 answers
Add background image react native
Javascript React
0 vote130 views1 answer
React-router in saga
Javascript React
1 vote148 views3 answers
How to decode jwt token in react
Javascript React
0 vote78 views1 answer
Open xcode shorthand react native
Javascript React
1 vote81 views1 answer
Mui modal backdrop
Javascript React