/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

5 votes319 views3 answers
React routes multiple compoenents
Javascript React
0 vote347 views1 answer
How to align text vertically center beside an image in react native
Javascript React
0 vote355 views1 answer
How to run and clone react app
Javascript React
0 vote395 views1 answer
Put logo in qr code in react js qrcode.react
Javascript React
15 votes343 views6 answers
Form in react
Javascript React
0 vote355 views1 answer
React native create text file
Javascript React
0 vote359 views2 answers
'Navbar' is not defined react/jsx-no-undef
Javascript React
0 vote348 views1 answer
React Native Segmented Control Tab
Javascript React
0 vote354 views1 answer
React component in for loop
Javascript React
0 vote318 views2 answers
React filter buttons
Javascript React