You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe
I want to add custom functionality to the Bootstrap Modal Dialog component in order to make the modal draggable. I can easily do this by using the <Modal.Dialog> component, but the Modal component already adds this element in! It would be great if there was a disableDialog property on the Modal component to simplify this.
Describe the solution you'd like
Something like this seems appropriate, where I can disableDialog on the component and then use <Modal.Dialog> directly.
I have tried using the dialogAs property to pass a custom <Modal.Dialog> component, but I can't figure out how to pass the properties using this method and it seems simpler to use the <Modal.Dialog> as JSX directly inline.
Is your feature request related to a problem? Please describe
I want to add custom functionality to the Bootstrap Modal Dialog component in order to make the modal draggable. I can easily do this by using the <Modal.Dialog> component, but the Modal component already adds this element in! It would be great if there was a disableDialog property on the Modal component to simplify this.
Describe the solution you'd like
Something like this seems appropriate, where I can disableDialog on the component and then use <Modal.Dialog> directly.
<Modal show={modal} onHide={closeModal} disableDialog> <Modal.Dialog className='position-absolute' style={{ left: leftValue, top: topValue }}> <Modal.Header closeButton onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}> <Modal.Title>{title}</Modal.Title> </Modal.Header> <Modal.Body> ... modal content </Modal.Body> </Modal>
Describe alternatives you've considered
I have tried using the dialogAs property to pass a custom <Modal.Dialog> component, but I can't figure out how to pass the properties using this method and it seems simpler to use the <Modal.Dialog> as JSX directly inline.
For Example:
<Modal show={modal} onHide={closeModal} dialogAs={() => <Modal.Dialog className='position-absolute' style={{ left: leftValue, top: topValue }}>{children}</Modal.Dialog>}> <Modal.Header closeButton onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}> <Modal.Title>{title}</Modal.Title> </Modal.Header> <Modal.Body> ... modal content </Modal.Body> </Modal>
Additional context
No response
The text was updated successfully, but these errors were encountered: