/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

1 vote201 views2 answers
Yarn react native cli
Javascript React
1 vote154 views1 answer
Functions inside class component react
Javascript React
133 votes846 views5 answers
Npx create-react-app
Javascript React
2 votes204 views1 answer
React-native-reanimated npm
Javascript React
1 vote210 views2 answers
How to create react native app
Javascript React
0 vote208 views1 answer
Application/ld+json react
Javascript React
1 vote194 views3 answers
React redux how to change object value in reducer
Javascript React
0 vote204 views1 answer
Burger menu bulma React
Javascript React
0 vote196 views1 answer
Content uri react native fs
Javascript React
3 votes194 views2 answers
React-native android build apk
Javascript React