Using self-end on q-card-actions
-
I’m trying to create an horizontal list of cards like google’s play-store, it’s supposed to go inside a
<div class="scroll">
container, but I don’t know how to handle a dynamic<q-card-title>
height to keep<q-card-actions>
always at the end (self-end
)This is how it looks now (note: second card’s price should be at the very bottom):
HorizontalCardList.vue
<template> <div class="row sm-gutter no-wrap"> <div v-for="n in 10" :key="n" class="col-xs-5 col-sm-3 col-md-2"> <q-card class="no-margin text-center full-height"> <q-card-media> <img src="http://placehold.it/180x180" class="responsive" /> </q-card-media> <q-card-title class="no-padding text-left on-right"> <small class="ellipsis-2-lines" v-if="n % 2 === 0">Papas y boñatos</small> <small class="ellipsis-2-lines" v-else>Papas y boñatos y verga</small> <q-btn flat slot="right" class="no-padding"> <q-icon name="more_vert" /> </q-btn> </q-card-title> <q-card-separator /> <q-card-actions> $ 1.000 </q-card-actions> </q-card> </div> </div> </template> <script> export default { name: 'horizontal-card-list' } </script> <style scoped> .row { padding-bottom: 1rem; padding-top: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem } .q-card-title { line-height: 1em; padding-top: 0.5em; padding-bottom: 0.5em } </style>
-
I’m having the same problem and couldn’t find any solution yet.
-
Not exactly the same content as you, but I got extra stuff on cards to ‘float to the bottom’ using
style="flex-grow: 1"
:<q-card-title style="flex-grow: 1" @click="handleSelect"> {{item.text}} <span v-if="!pageSettings.anonymous" slot="subtitle">{{subText}}</span> <q-icon v-if="isMine(item) || isAdmin()" slot="right" name="more_vert" > . . . </q-icon> </q-card-title> <comment :id="id" :active="activities.includes('comment')" :pageSettings="pageSettings" :activitySettings="activitySettings.comment" />
The output of the
comment
component is now anchored at the bottom of the card, however tall the card is. -
I was able to achieve this by utilizing the column, col & col-auto class on the q-card.
<div v-for="n in 10" :key="n" class="col-xs-5 col-sm-3 col-md-2"> <q-card class="no-margin text-center column full-height"> <q-card-media class="col-auto"> <img src="http://placehold.it/180x180" class="responsive" /> </q-card-media> <q-card-title class="no-padding text-left on-right col"> <small class="ellipsis-2-lines" v-if="n % 2 === 0">Papas y boñatos</small> <small class="ellipsis-2-lines" v-else>Papas y boñatos y verga</small> <q-btn flat slot="right" class="no-padding"> <q-icon name="more_vert" /> </q-btn> </q-card-title> <q-card-separator /> <q-card-actions class="col-auto"> $ 1.000 </q-card-actions> </q-card> </div>
-
@steve Nice
Upgrade from 0.1 to 1.x, and optimize for xs screen:
<div v-for="n in 10" :key="n" class="col-xs-12 col-sm-4 col-md-3 col-lg-3 q-col-gutter-md"> <q-card class="q-ma-sm"> <q-card-section class="col-auto"> <img src="http://placehold.it/320x180" class="responsive" /> </q-card-section> <q-card-section class="no-padding text-left on-right col"> <small class="ellipsis-2-lines" v-if="n % 2 === 0">Papas y boñatos</small> <small class="ellipsis-2-lines" v-else>Papas y boñatos y verga</small> <q-btn flat slot="right" class="no-padding"> <q-icon name="more_vert" /> </q-btn> </q-card-section> <q-separator /> <q-card-actions class="col-auto"> $ 1.000 </q-card-actions> </q-card> </div>
-
@farwish Beware, you are missing “column” on the q-card and thus, the col-auto will not be observed.
Also, if you were to use “column” on the q-card, be advised that the column will get flex-wrap:wrap and the contents of the q-item-section will grow wide. Also, because of that :line=“1” will not add the ellipsis as the contents will stretch!Since column is using flex, you might need a better solution for v1 and full height q-cards.