/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 vote339 views1 answer
Mui modal backdrop
Javascript React
105 votes392 views1 answer
Create react app scaffolding
Javascript React
1 vote351 views1 answer
Concatenate a variable inside text react native
Javascript React
0 vote401 views1 answer
Yarn add react-native-elements
Javascript React
1 vote393 views1 answer
React native detect production
Javascript React
0 vote385 views2 answers
Mobile nav react npm
Javascript React
0 vote393 views1 answer
Bottom navigation bar react native hide on keyboard
Javascript React
0 vote389 views1 answer
React Alert when rate changes
Javascript React
10 votes392 views2 answers
React-native text overflow ellipsis
Javascript React
0 vote319 views2 answers
React particles react
Javascript React