/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 votes100 views1 answer
UseHistory is not exported form react-router-dom
Javascript React
32 votes97 views1 answer
React touter dom
Javascript React
1 vote114 views1 answer
Import json file in react native
Javascript React
0 vote103 views1 answer
Set navigation drawer to open by default react native
Javascript React
2 votes97 views2 answers
React google maps
Javascript React
1 vote111 views1 answer
Is a good idea to add class in react hooks with document.body.addclasslist
Javascript React
3 votes100 views1 answer
React js image path src from local folder
Javascript React
2 votes104 views1 answer
Property 'target' does not exist on type 'string' react
Javascript React
0 vote102 views1 answer
React input value set state on change
Javascript React
2 votes103 views2 answers
Create stack navigator has been moved to react-navigation-stack
Javascript React