/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

9 votes188 views3 answers
React js Uncaught RangeError: Maximum call stack size exceeded
Javascript React
1 vote277 views1 answer
Reactnode prop-types
Javascript React
5 votes188 views1 answer
React code splitting (component based)
Javascript React
1 vote193 views6 answers
React-native build debug apk
Javascript React
0 vote183 views1 answer
Form- text area react
Javascript React
7 votes243 views3 answers
Install node-sass version for react
Javascript React
9 votes212 views5 answers
Find react version
Javascript React
0 vote174 views1 answer
React hooks update parent state from child
Javascript React
9 votes143 views4 answers
Firebase' is not defined no-undef react
Javascript React
0 vote176 views2 answers
Selected css based on route react
Javascript React