3. Using self-end on q-card-actions

Using self-end on q-card-actions

  • F

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

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

    0
  • D

    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.

    1