/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

2 votes121 views2 answers
React native asign width to image
Javascript React
5 votes124 views4 answers
How to get url in react
Javascript React
0 vote65 views1 answer
Liquid indicators in react native
Javascript React
1 vote115 views1 answer
Npm react redux logger
Javascript React
22 votes108 views3 answers
How to define array in react js
Javascript React
2 votes106 views1 answer
React onclick type
Javascript React
7 votes104 views2 answers
Br in react native
Javascript React
25 votes105 views3 answers
Setting a background Image With React Inline Styles
Javascript React
0 vote109 views1 answer
Update array hooks react
Javascript React
1 vote113 views1 answer
Get children react
Javascript React