/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 vote196 views1 answer
Making all makers to show in react native map
Javascript React
0 vote202 views1 answer
Pass params axios get react
Javascript React
1 vote196 views1 answer
React native detect production
Javascript React
0 vote185 views1 answer
How to put react compnent to bottom
Javascript React
14 votes261 views4 answers
React how to update state array
Javascript React
6 votes236 views2 answers
String to html javascript react
Javascript React
14 votes202 views2 answers
React router link with params
Javascript React
0 vote206 views2 answers
React hook will mount
Javascript React
8 votes192 views2 answers
Install material icons for react
Javascript React
64 votes198 views6 answers
Router react
Javascript React