/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

18 votes191 views6 answers
React native build
Javascript React
5 votes216 views3 answers
Get url react
Javascript React
0 vote215 views1 answer
Javascript ReactDOM.render
Javascript React
0 vote279 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React
0 vote209 views1 answer
React ES6 Arrow Functions
Javascript React
0 vote208 views3 answers
Django send and receive image data to react
Javascript React
0 vote225 views1 answer
How to reset count in react
Javascript React
1 vote206 views1 answer
How to upload image in react js
Javascript React
5 votes351 views1 answer
Inline z-index react
Javascript React
2 votes213 views1 answer
Npm install --save react-native-vector-icon
Javascript React