/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

-2 votes128 views1 answer
2 taps is required to close keyboad in react native
Javascript React
0 vote117 views1 answer
React currency format
Javascript React
3 votes119 views1 answer
React router dynamic routes
Javascript React
0 vote116 views1 answer
React createElement interactive button
Javascript React
0 vote116 views1 answer
Nextjs react native web typescript
Javascript React
0 vote120 views1 answer
How to resolve click for div logging as parent too, in react
Javascript React
0 vote130 views1 answer
React router dom two page form
Javascript React
0 vote118 views1 answer
Test one function in react class
Javascript React
12 votes136 views3 answers
Font weight react native
Javascript React
2 votes121 views2 answers
React 17
Javascript React