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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.