Using self-end on q-card-actions

Frondor

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):
alt text

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>

volkano

I’m having the same problem and couldn’t find any solution yet.

dsl101

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.

steve

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>

farwish

@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>

steve

@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.

No More Posting New Topics!

Using self-end on q-card-actions