/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 vote168 views1 answer
Antd react native
Javascript React
16 votes164 views3 answers
Importing svg into react
Javascript React
0 vote140 views1 answer
How to run and clone react app
Javascript React
7 votes147 views1 answer
How to place a line break in react native
Javascript React
0 vote146 views2 answers
React js form radio input using hooks
Javascript React
0 vote186 views2 answers
Reactjs date display
Javascript React
3 votes151 views2 answers
Link react
Javascript React
113 votes238 views6 answers
How to create a new react app
Javascript React
22 votes153 views3 answers
How to define array in react js
Javascript React
3 votes154 views2 answers
React native pm ERR! code EINTEGRITY
Javascript React