/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 votes92 views2 answers
React hook form
Javascript React
11 votes143 views4 answers
React native flatlist
Javascript React
7 votes149 views4 answers
React native update state array of objects
Javascript React
0 vote142 views1 answer
Stop React Ant Design Upload component from posting files automatically
Javascript React
0 vote134 views1 answer
React native undedined map
Javascript React
0 vote158 views1 answer
Try catch in react native
Javascript React
0 vote158 views1 answer
React Liked Component
Javascript React
9 votes167 views3 answers
Disable yellow box react native
Javascript React
4 votes144 views2 answers
React get url params in class component
Javascript React
0 vote147 views1 answer
Random picture position in react
Javascript React