/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

-1 vote344 views2 answers
React js props lara css uygulama
Javascript React
0 vote353 views1 answer
Add React Router to React Redux CRUD App
Javascript React
0 vote381 views1 answer
React tutorial componentDidMount() componentWillUnmount()
Javascript React
6 votes352 views3 answers
React native vector icons not showing
Javascript React
1 vote393 views2 answers
Cannot read property of undefined (reading 'push') react
Javascript React
20 votes366 views6 answers
Build apk react native
Javascript React
3 votes356 views1 answer
Force update react hooks
Javascript React
0 vote372 views1 answer
Use this in a react js component
Javascript React
0 vote350 views1 answer
Find null/empty values in reactive form
Javascript React
-1 vote380 views1 answer
Moment in react native
Javascript React