/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 vote324 views3 answers
Add webpack to react project
Javascript React
0 vote332 views1 answer
Npm ERR! peer react@"^15.x.x" from [email protected]
Javascript React
1 vote310 views1 answer
React-native razorpay
Javascript React
0 vote294 views1 answer
React-datepicker
Javascript React
1 vote297 views5 answers
React date picker
Javascript React
0 vote368 views1 answer
Radio button in reactive forms angular material
Javascript React
4 votes322 views2 answers
How to skip the undefined values from the list and filter the rest of the data in react js
Javascript React
0 vote378 views1 answer
How to get year in react
Javascript React
4 votes374 views2 answers
React usememo vs usecallback
Javascript React
0 vote312 views1 answer
Get element ref react
Javascript React