/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 vote199 views1 answer
React native text input number only
Javascript React
0 vote214 views1 answer
Textalignvertical not working in ios react native
Javascript React
0 vote200 views1 answer
React JSON data to display in a table
Javascript React
0 vote201 views1 answer
Lite youtube embed react
Javascript React
0 vote252 views1 answer
Discord bot remove message reaction
Javascript React
0 vote201 views1 answer
Use of undeclared identifier 'gmsservices' react native
Javascript React
2 votes197 views1 answer
React nginx returns 404 after reload
Javascript React
8 votes188 views1 answer
Professional react projects
Javascript React
0 vote212 views2 answers
React convert excel to json
Javascript React
0 vote204 views1 answer
Cannot read properties of undefined (reading 'length') selectionlist react native
Javascript React