/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

3 votes236 views5 answers
React date range picker
Javascript React
0 vote259 views1 answer
Get call log in react native android
Javascript React
6 votes250 views1 answer
React history with search
Javascript React
4 votes268 views1 answer
React how to remove commas from a string
Javascript React
0 vote240 views1 answer
Async await react stackoverflow
Javascript React
1 vote231 views1 answer
React-redux todo list
Javascript React
8 votes220 views4 answers
Props react
Javascript React
0 vote245 views1 answer
What is react mounting
Javascript React
1 vote234 views1 answer
How hooks handle dependency in react
Javascript React
0 vote240 views2 answers
Textarea react native
Javascript React