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:
Can you please recommend any ideas? Thanks.
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.