0
202
ViewsEstoy tratando de hacer tarjetas expandibles usando Vue, el problema es que al expandir una tarjeta, las tarjetas de la derecha crean un espacio vacío
Estoy tratando de hacer tarjetas expandibles usando Vue, el problema es que al expandir una tarjeta, las tarjetas de la derecha crean un espacio vacío, toda la fila inferior cae, y solo quería que la tarjeta directamente debajo de ella bajara, no todo.
Así es como está actualmente:
Esta es la forma en que quiero:
Aquí está la parte del código que creo que controla esto, ¿o estaría en la parte de expansión?
<v-container class="pt-0 mt-0"> <v-layout row wrap> <v-flex xs12 md6 lg3 v-for="stateCard in filteredSearch" :key="stateCard.name" > <MakeTheCard :item="infoCard" /> </v-flex> </v-layout> </v-container>
·
Juan Pablo Isaza
1 answers
Answer question0
Creo que tienes un problema de CSS en lugar de Vue.
Un enfoque es hacer un contenedor flex con columns , cada una de las cuales contiene una cantidad X de elementos.
al igual que:
<div class="row"> <div class="col"> <Card v-for="card in 2" :key="card" /> </div> <div class="col"> <Card v-for="card in 2" :key="card" /> </div> <div class="col"> <Card v-for="card in 1" :key="card" /> </div> </div>Acabo de hacer una demostración para ti: https://codesandbox.io/s/withered-leaf-mv8lp
·
Juan Pablo Isaza
Report
Answer question