/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 vote396 views1 answer
As it does not contain a package.json file. react
Javascript React
0 vote386 views1 answer
React Calender Style
Javascript React
0 vote388 views1 answer
How to remove the top border from table react bootstrap
Javascript React
0 vote415 views5 answers
Arrow function component react shortcut vscode
Javascript React
0 vote387 views1 answer
React strap documentation
Javascript React
0 vote386 views1 answer
Gradle error react native
Javascript React
0 vote381 views1 answer
Compass in react js
Javascript React
5 votes384 views3 answers
React router lazy load
Javascript React
0 vote332 views1 answer
Undefined is not a function (near '...(0, _reactNative.createStackNavigator)...')
Javascript React
6 votes386 views2 answers
Google sign up react npm
Javascript React