/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 vote396 views2 answers
React Calender
Javascript React
0 vote388 views2 answers
React native detect platform
Javascript React
0 vote395 views1 answer
Text input underline react native
Javascript React
0 vote391 views1 answer
Ui5 React bind element
Javascript React
13 votes391 views3 answers
Enable emmet vscode react
Javascript React
0 vote386 views1 answer
React-data-table-component edit action
Javascript React
0 vote376 views1 answer
React native scrollbar position issue
Javascript React
1 vote429 views1 answer
How to add react icons using yarn
Javascript React
2 votes384 views2 answers
How to add multiple classes to a ReactJS Component
Javascript React
-1 vote415 views2 answers
For loop in react native
Javascript React