plotly / plotly/plotly.js

`responsive` doesn't work if a parent has padding and `min-width: min-content`

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

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

bug P2
Ngôn ngữ chính
JavaScript
Star
18.3k
Fork
2k
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
28

Mô tả

steps to reproduce:

  1. open this fiddle https://jsfiddle.net/rhdq9ynu/5/
  2. use ctrl+mousewheel to zoom out to 30%
  3. use ctrl+mousewheel to zoom back in to 100%
  4. notice that the plot now overflows its parent and the home icon in the top is no longer visible.

before

Image

after

Image

The key is this CSS:

#app {
  padding: 0px 100px;

  & > * {
    min-width: min-content;
  }
}

If you remove either the padding or the min-width everything works fine.

Both min-content and fit-content are buggy.

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

Mở hướng dẫn đóng góp

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.

Hướng nghiên cứu

Bắt đầu với JSFiddle được liên kết và tái hiện chuỗi thu phóng bằng padding và CSS min-width như đã hiển thị. Không có tệp repository hoặc test nào được nêu; được xem là hoàn tất khi biểu đồ vẫn nằm trong phần tử cha và biểu tượng home vẫn hiển thị sau khi thu phóng trở lại 100%, bao gồm cả với min-content và fit-content.

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

Đánh giá

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

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.