vue.jsflexboxquasar-framework

How to force actions to the right of Vue3 Quasar horizontal card

Does anyone know how to get the actions to go to the far right side with a small title with quasar classes or flexbox? If I replace the text on the right, it pushes the actions over, but I want them on the far right regardless

enter image description here

Codepen: https://codepen.io/starlilycoco/pen/ZEZRLOE?editors=111

<div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card" flat bordered>
      <q-card-section horizontal>
        <div>Title</div>

        <q-card-actions vertical align="right" class="justify-around q-px-md">
          <q-btn flat round color="red" icon="favorite"></q-btn>
          <q-btn flat round color="accent" icon="bookmark"></q-btn>
          <q-btn flat round color="primary" icon="share"></q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </div>
Solution

  • Add the flex and justify-between classes to your <q-card-section horizontal>, like this:

    <div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card" flat bordered>
      <q-card-section horizontal class="flex justify-between">
        <div>Title</div>

        <q-card-actions vertical align="right" class="justify-around q-px-md">
          <q-btn flat round color="red" icon="favorite"></q-btn>
          <q-btn flat round color="accent" icon="bookmark"></q-btn>
          <q-btn flat round color="primary" icon="share"></q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </div>
</div>