Is dynamic card width possible?

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

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

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
angular, bootstrap, javascript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách đọc phép tính cardWidth được đề cập trong issue và tái hiện hành vi với bố cục responsive 12 cột của Bootstrap cùng các hình ảnh có kích thước khác nhau. Xác định xem chiều rộng của card có thể theo cột responsive đã được render sau khi Bootstrap áp dụng việc định kích thước hay không; done có nghĩa là thao tác vuốt vẫn giữ đúng kích thước của hình ảnh và card trên các độ rộng trình duyệt và thiết bị khác nhau.

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

Mô tả

Hi,

First, nice project! Thank you!
I am using bootstrap and its 12 grid system. I have picture of various sizes, and I currently display them inside a size 8 column with 2 columns on each side. I have width:100% on the picture so regardless of the size of the picture or size of the browser/device the picture stretch/shrink nicely and fill/fit the size 8 column.
When user swipe, I move to next picture. I try to use this project to have slide effect but cannot. The container has a huge width to hold all the pictures so it does not wrap. The width 100% on the image will stretch it to very large and got the wrong size. Set width:auto does not work because my picture has various sizes. Set to a specific pixel works but does not work when browser/device width changes.
I also tried to put the column inside cardflow. Did not work because the size 8 column has 66.66% as width and stretches to really big. I tried put the whole row inside cardflow. Also does not work. Basically the row could no longer figure out the browser/device width, or it is overwrite by cardflow.
I looked a little into the code. I see a calculation of cardWidth. Is it possible to have a dynamic cardWidth calculated after bootstrap apply the width to the pictures?

Thank you in advance.

--Gordon

Ngôn ngữ chính
JavaScript
Star
15
Fork
7
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 konsumer/angular-cardflow

Tất cả issue của konsumer/angular-cardflow

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.