CODEWITHSUNDEEP
vue.jsvuetify.js
Ronak07
Ronak07

Reputation: 894

Floating action button is hiding in bottom navigation bar

<v-tooltip top>
  <template v-slot:activator="{ on }">
        <v-btn
          fab
          color="green"
          v-on="on"
          bottom
          right
          fixed
          :loading="isRefreshing"
          @click="refreshFiles"
        >
          <v-icon color="white">mdi-sync</v-icon>
        </v-btn>
      </template>
  <span>Refresh</span>
</v-tooltip>

<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
  <template v-for="item in menuItems">
            <v-btn
              v-if="item.isVisible"
              :key="item.title"
              icon
              @click="goToRoute({ name: item.name, params: item.params })"
            >
              <span>{{ item.title }}</span>
              <v-icon>{{ item.icon }}</v-icon>
            </v-btn>

          </template>
  <v-btn icon @click="toProfileEdit">
    <span>Profile</span>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-bottom-navigation>

I am using vuejs with vuetify, I have one query where I am stuck, The issue is I am using bottom navigation bar to route to various components(pages), and each page has a floating action button in right bottom, The issue the floating action button is getting hide inside the bottom navigation bar.

Is there any idea or way on how to overcome this issue ??

Any help with example would be appreciated ..enter image description here

As you can see the green button is getting hide behind bottom nav bar.

Upvotes: 0

Views: 1257

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out to use an inline style :

<v-btn style="z-index:100; bottom:72px;" fab ...

Upvotes: 1

Related Questions