/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

2 votes225 views1 answer
How to see if a web site is useing react
Javascript React
23 votes312 views5 answers
USE ICONS IN REACT
Javascript React
1 vote290 views1 answer
How to delete element at a particular index of array in react js
Javascript React
0 vote169 views1 answer
React icons cdn
Javascript React
2 votes258 views1 answer
React native open email client expo
Javascript React
4 votes213 views2 answers
React get url params in class component
Javascript React
0 vote209 views1 answer
React native custom debounce input
Javascript React
0 vote235 views3 answers
React hook example
Javascript React
0 vote236 views1 answer
Unable to resolve "@react-native-community/masked-view" from
Javascript React
4 votes213 views1 answer
Reactjs onclick open new page
Javascript React