CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vuetify.js
Guillermo Verón
Guillermo Verón

Reputation: 238

Floating action buttons overlap

I wanted to have two floating action buttons (FABs) but currently the buttons overlap, what I want to achieve is to show both floating action buttons on top of each other like the picture below.

This is probably a recurring question, but I didn't find any solution to vuetify

enter image description here

This is my code:

<v-btn fab bottom fixed right dark color="primary"></v-btn>
<v-btn fab bottom fixed small right dark color="secondary"></v-btn>

Vuetify version: 2.1.11

Upvotes: 1

Views: 1159

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362660

You could put them together in a fixed container like the v-navigation-drawer...

  <v-navigation-drawer stateless permanent floating fixed right>
        <v-btn fab dark color="primary" class="mb-2">
        </v-btn>
        <v-btn fab dark color="secondary">
        </v-btn>
  </v-navigation-drawer>

Demo

Upvotes: 2

Related Questions