/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 vote125 views1 answer
Gradlew command not found react native
Javascript React
3 votes113 views1 answer
Module not found: can't resolve 'react' in 'c:\users\pavlos\desktop\reactjs\hwr\reactproject2\src'
Javascript React
0 vote147 views1 answer
Counter composant react
Javascript React
0 vote133 views1 answer
Bot react message with custom emoji
Javascript React
0 vote129 views2 answers
Login with facebook expo react native
Javascript React
3 votes232 views3 answers
Center horizontally react native
Javascript React
0 vote131 views1 answer
React-native-cli remove
Javascript React
0 vote136 views1 answer
Reactjs function exemple useEffect
Javascript React
0 vote129 views1 answer
OnPress image react native
Javascript React
1 vote126 views1 answer
React native linking email
Javascript React