vue.jsfrontendquasar-framework

How to Add Gap Between Button Dropdown and Card in Vue Quasar


So I am trying to create a personal automation app that has some action blocks that I add using an Action Dropdown button. Here's this element:

<div class="row justify-center">
  <q-btn-dropdown v-model="menu" class="glossy" color="primary" label="++ Add Action">
    <q-card class="">
      <q-list bordered separator>
        <q-item clickable v-ripple>
          <q-item-section side>
            <q-icon color="primary" name="add_circle_outline" />
          </q-item-section>
          <q-item-section>
            <q-item-label class="q-ml-xs">Create a Contact</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section side>
            <q-icon color="primary" name="update" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Update Contact</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section side>
            <q-icon color="primary" name="system_update_alt" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Upsert Contact</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable v-ripple>
          <q-item-section side>
            <q-icon color="primary" name="delete" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Delete Contact</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </q-btn-dropdown>
</div>

The problem is I can't seem to add gap between the Action Button and Dropdown menu. I have tried adding q-mb-sm to q-btn-dropdown and q-mt-sm to q-card to no avail. Even custom CSS is not working, it always shown like this:

enter image description here

Can you please recommend any ideas? Thanks.


Solution

  • CSS:
    
    q-btn-dropdown {
      display: block;
      padding-top:2rem;
      border: 1px solid #000;
    }
    

    What does that do? It alters the rendering mode of the content and treats it as one block, thus allowing the contents repositioning using padding.