/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 vote250 views1 answer
React faq
Javascript React
0 vote239 views1 answer
React password hashing
Javascript React
0 vote227 views1 answer
React bootstrap button
Javascript React
0 vote217 views2 answers
React query stop refetch when i switch browser tabs (per query)
Javascript React
0 vote215 views1 answer
Fetchutils in react admin
Javascript React
0 vote232 views1 answer
React native firebase email verification
Javascript React
93 votes202 views6 answers
Install react router dom
Javascript React
0 vote220 views1 answer
Setting up react on visual studio code
Javascript React
0 vote207 views6 answers
Replace all in react js
Javascript React
0 vote228 views1 answer
Download images from http link in react
Javascript React