/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 vote118 views1 answer
Telerik grid data automatically scroll to particular record in react
Javascript React
0 vote119 views1 answer
React bootstrap navbar align right buttons
Javascript React
0 vote151 views1 answer
Htaccess to deploy react app to cpanel
Javascript React
3 votes119 views1 answer
React router dynamic routes
Javascript React
0 vote128 views3 answers
React animation
Javascript React
0 vote121 views1 answer
Font family react
Javascript React
0 vote124 views1 answer
Edit json text react
Javascript React
0 vote113 views1 answer
Added font to react native
Javascript React
0 vote113 views1 answer
Mreact graph
Javascript React
5 votes133 views2 answers
React js download file
Javascript React