/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 vote303 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
1 vote289 views1 answer
Inject Javascript Function not working in Android React Native WebView but work fine in iOS React Native
Javascript React
0 vote344 views2 answers
Quokka create-react-app sample
Javascript React
-2 votes348 views3 answers
Keyboard dismiss in react native
Javascript React
0 vote325 views1 answer
React native firebase login with facebook
Javascript React
0 vote357 views1 answer
React native make safe view in mobile
Javascript React
0 vote335 views1 answer
Comming soon page in react
Javascript React
0 vote356 views1 answer
React.common.JavascriptException: Error: invalid host
Javascript React
0 vote344 views1 answer
React native stylesheet shortcut
Javascript React
0 vote301 views1 answer
How to refresh android studio react native
Javascript React