/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

1 vote186 views1 answer
How to set limit in map in react hook
Javascript React
27 votes182 views4 answers
Font awesome react npm
Javascript React
6 votes144 views2 answers
Hr react
Javascript React
0 vote170 views1 answer
Can you wrap redux provider within react.strictmode
Javascript React
0 vote205 views1 answer
React-leaflet/core/cjs/pane.js:7%20error15-Jun-2021%2000:45:06%20%20%20%20%20%20const%20pane%20=%20props.pane%20??%20context.pane;
Javascript React
0 vote179 views2 answers
Dispay react component after some time
Javascript React
1 vote369 views1 answer
Rendering, reconciliation and committing in react
Javascript React
0 vote161 views1 answer
How to solve Error: EPERM: operation not permitted, mkdir 'C:\Users\SKY' while downoad react
Javascript React
-2 votes163 views5 answers
React cheat sheet
Javascript React
0 vote185 views1 answer
Add Navbar to React Redux CRUD App
Javascript React