/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

66 votes207 views6 answers
Routing react
Javascript React
2 votes152 views1 answer
Function component react form
Javascript React
2 votes206 views1 answer
Authfunctions react
Javascript React
0 vote210 views3 answers
React animation
Javascript React
0 vote199 views1 answer
Installation de react native maps bibliothèque
Javascript React
0 vote203 views1 answer
Force users to update your application in React Native
Javascript React
0 vote192 views1 answer
React native run on a particular emu
Javascript React
0 vote192 views2 answers
React native elements datepicker
Javascript React
1 vote210 views2 answers
How to use gif in react native
Javascript React
26 votes161 views4 answers
React context
Javascript React