search

konsumer / angular-cardflow

An angular ngRepeat-based coverflow for a bunch of cards that uses CSS3 animations efficiently
16 stars 8 forks source link

Is dynamic card width possible? #2

Open sunshineo opened 10 years ago

sunshineo commented 10 years ago

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

konsumer commented 10 years ago

This is untested, but cardWidth comes from scope.model.cardWidth, so you may be able to do something with a model. I will need to look at this more, once I get a bit of time.

konsumer commented 10 years ago

this might be a helpful start, if you want to have a look at dynamically messing with the model to do things.

sunshineo commented 10 years ago

Thank you konsumer. I did not understand how the link you provided can help me. The example has picture size fixed at 200px when I need it to change based on the width of the column.

konsumer commented 10 years ago

In the console.log() you can see the properties you have access to at that moment, in the watch. For example cardWidth: 210 which might be especially relevant.

sunshineo commented 10 years ago

Interesting. I'll dig in more.