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

    QCard flex problem in card-actions if parent container has also flex enabled

    Help
    1
    1
    337
    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.
    • S
      Stargazer last edited by

      Hey everyone,

      I stumbled about this very strange issue, where the flex-behavior inside <q-card-actions> gets lost if the parent container (<q-card>) has also some flex attributes.

      What I try is to have multiple cards with same height, where the buttons prev/next always stay at the bottom (because the text length changes). If I set “flex content-between” for the <q-card>, the “flex justify-between” for <q-card-actions> gets lost, I can’t see any wrong overwriting the dev-toolbar.

      You can see the behavior here (if you remove “flex” from <q-card>, the <q-card-actions> are aligned well, but are not at the bottom anymore):
      https://codepen.io/zircondev/pen/eYZzPww

      Does anyone of you have an idea if this is an issue/bug?

      <div id="q-app">
        <div class="container q-pa-md">
          <q-card class="flex content-between" square>
            <q-img src="https://placeimg.com/500/300/nature" :ratio="3/2" basic>
              <div class="absolute-bottom text-white text-center text-md-left text-h6">My image header</div>
            </q-img>
            <q-card-section class="text-center text-md-left text-body1">
              <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
            </q-card-section>
            <q-card-actions align="between" class="flex justify-between">
              <q-btn flat>Previous</q-btn>
              &copy; 2020 Vendor
              <q-btn flat>Next</q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </div>
      
      1 Reply Last reply Reply Quote 0
      • First post
        Last post