/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 vote146 views1 answer
React-native-image-viewing
Javascript React
0 vote167 views1 answer
React-hook-form image
Javascript React
0 vote180 views9 answers
How to run a cloned react native project
Javascript React
3 votes159 views1 answer
React hooks delete item from array
Javascript React
0 vote131 views2 answers
Prism react renderer
Javascript React
12 votes132 views2 answers
React native flatlist container style
Javascript React
0 vote133 views1 answer
Pass text to button component react
Javascript React
0 vote162 views1 answer
Remove duplicate value from map react js
Javascript React
0 vote141 views1 answer
React shadow
Javascript React
0 vote137 views1 answer
React axios get cookie from response
Javascript React