/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 vote195 views1 answer
React createElement interactive button
Javascript React
7 votes192 views4 answers
React native textinput disable keyboard
Javascript React
11 votes202 views3 answers
Reactjs get url query params as object
Javascript React
0 vote138 views0 answer
React
Javascript React
17 votes265 views3 answers
React canvas clear
Javascript React
8 votes203 views2 answers
Set value as object in react hooks
Javascript React
30 votes196 views6 answers
React if statement
Javascript React
0 vote192 views2 answers
Which one is better arrow functions or using bind in react?
Javascript React
15 votes192 views2 answers
UseReducer() hook react
Javascript React
0 vote223 views1 answer
How to add carsoul to react project
Javascript React