/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

4 votes249 views2 answers
Onitemclick react
Javascript React
0 vote260 views1 answer
React redux open another page
Javascript React
0 vote261 views1 answer
Retour à la ligne react native
Javascript React
0 vote203 views1 answer
React native change image color
Javascript React
0 vote244 views1 answer
How to turn of autocomplete in react hook form material ui
Javascript React
7 votes263 views4 answers
Import image in react js
Javascript React
11 votes224 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
0 vote246 views1 answer
Why is necessary to run react-native run
Javascript React
2 votes258 views2 answers
Easiest way to show current date in react
Javascript React
0 vote239 views1 answer
Configure the Chrome debugger react
Javascript React