Draggable react bootstrap Modal moves the browser scroll bar

Đang mở
#321 2 bình luận 6 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
30/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react
Lĩnh vực
frontend

Hướng nghiên cứu

Start by reproducing the example with react-bootstrap Modal wrapped in a Draggable component, using the modal header as the handle and a body large enough to create a browser scrollbar. Confirm the current scrollbar movement and define done as moving the modal without moving the browser scrollbar.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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>
    )
}

}

Ngôn ngữ chính
JavaScript
Star
9.3k
Fork
1k
Merge trung bình
3 ngày 8 giờ
Pull request đã merge (30 ngày)
4

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-grid-layout/react-draggable

Tất cả issue của react-grid-layout/react-draggable

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.