/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 vote249 views1 answer
Nested arrays reactjs tables
Javascript React
0 vote205 views1 answer
Input hook react
Javascript React
0 vote205 views1 answer
Simbu react1
Javascript React
0 vote223 views1 answer
Convert table to excel reactjs
Javascript React
2 votes186 views1 answer
React higher order components
Javascript React
0 vote228 views2 answers
Quokka create-react-app sample
Javascript React
0 vote197 views1 answer
Import tippy react
Javascript React
0 vote213 views1 answer
React native icon onpress remove highlight onpress
Javascript React
0 vote241 views1 answer
React roter dom npm
Javascript React
1 vote290 views1 answer
React-redux todo list
Javascript React