react-draggable icon indicating copy to clipboard operation
react-draggable copied to clipboard

Draggable react bootstrap Modal moves the browser scroll bar

Open nperriwp opened this issue 7 years ago • 2 comments
trafficstars

If I wrap a Modal object from react-bootstrap within a Draggable tag, and if the Modal is too large for the browser window so that a vertical scroll bar appears in the browser, moving the Modal object with my mouse also moves the vertical scroll bar with it. The vertical scroll bar should stay right where it is and the Modal object should move independently with the mouse.

Here is a code snippet:

import { Modal } from 'react-bootstrap' import Draggable from 'react-draggable'

export default class MyDraggableModal extends Component {

render() {
    return (
        <Draggable handle=".modal-header">
            <Modal animation={false} backdrop={false} show={true}>
                <Modal.Header>My Header</Modal.Header>
                <Modal.Body>
                    A large dialog so that vertical scroll bars will appear when the browser is resized too small....
                </Modal.Body>
                <Modal.Footer>My Footer</Modal.Footer>
            </Modal>
        </Draggable>
    )
}

}

nperriwp avatar Mar 21 '18 20:03 nperriwp

have you solved it @nperriwp

xskyAlex avatar Sep 25 '22 02:09 xskyAlex

No

nperriwp avatar Mar 17 '23 16:03 nperriwp