konsumer / konsumer/angular-cardflow

Is dynamic card width possible?

Abierto
#2 5 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
15
Forks
7
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

Start by reading the cardWidth calculation mentioned in the issue and reproduce the behavior with Bootstrap's responsive 12-column layout and differently sized images. Determine whether card width can follow the rendered responsive column after Bootstrap applies its sizing; done should mean swiping preserves the correct image and card dimensions across browser and device widths.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, bootstrap, javascript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.