how to separate quasar q-card from the center?

Annielaa 0
Viewed 21

I'm trying to separate the upper box from the center and make the items in the lower box distribute equally.But when I added <q-separater vertical></q-separater>, the left and right side box size are not equal. Below are the code, if you put it in codepen you will see the card is not separated equally. How can I fix this?

<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-md row justify-center items-center">
      <q-card class="my-card">
        <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">Group 1</div>
              </q-card-section>
              <q-separator vertical></q-separator>
              <q-card-section>
                <div class="text-h6">Group 2</div>
              </q-card-section>
            </q-card-section>
            <q-separator></q-separator>
            <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">A</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">B</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">C</div>
              </q-card-section>
      </q-card>
    </div>
  </div>
</div>

//script
const app = Vue.createApp({
  setup () {
    return {}
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')
quasar-framework vue.js javascript html
1 Answers

You can use Quasar's excellent layout system to achieve this.

First, you have to distribute evenly your groups.
Apply the class col-6 to the sections (Group 1, Group 2) separated by your <q-separator vertical>.

Then, simply apply the class col to your Group 2 sub-sections (A, B).

Here's a Codepen.

Christian Bonato0
Related