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


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