No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Using self-end on q-card-actions

    Help
    5
    6
    3367
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      Frondor last edited by 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>
      
      1 Reply Last reply Reply Quote 0
      • volkano
        volkano last edited by

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

        1 Reply Last reply Reply Quote 0
        • D
          dsl101 last edited by

          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 Reply Last reply Reply Quote 1
          • S
            steve last edited by 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>
            1 Reply Last reply Reply Quote 1
            • F
              farwish last edited by 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>
              
              S 1 Reply Last reply Reply Quote 1
              • S
                steve @farwish last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post