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



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

Log in to reply