/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 votes174 views1 answer
React-select
Javascript React
0 vote239 views1 answer
Invariant Violation: [React Intl] An `id` must be provided to format a message.
Javascript React
0 vote240 views1 answer
Missing script: "start" react
Javascript React
0 vote202 views2 answers
Datepicker range npm reactjs
Javascript React
-1 vote219 views1 answer
React-native-geolocation-service
Javascript React
4 votes184 views4 answers
React background gradient
Javascript React
5 votes174 views2 answers
Get url query in react
Javascript React
1 vote233 views2 answers
Switch in react
Javascript React
105 votes179 views1 answer
Create react app scaffolding
Javascript React
0 vote180 views1 answer
Ab mob react native expo
Javascript React