CODEWITHSUNDEEP
javascriptvue.jsleafletvuetify.js
Gabriel S.
Gabriel S.

Reputation: 197

How to set Vuetify Navigation Drawer always on top of all other app components

I'd like to know how I could do this.

With some components it appears to be on top, but then other components, such like a Leaflet (Map) component, they overlaps my SideDrawer so I can't use it properly.

How could I set my navigation drawer to be always on top with a higher z-index than the other components?

Upvotes: 4

Views: 5949

Answers (2)

Marco Arruda
Marco Arruda

Reputation: 709

I had a very similar problem with the v-calendar component. The navigation drawer was working for any other page than the one with v-calendar.

It turns out I was not using the elements v-app, v-content and v-container in the correct way. Could you share your App.vue content so we can check that?

I believe you should look for that structure rather than working on css tricks (not that we can't, but when working with components, we were not supposed to change that deep)

For example, in my app it works now and the structure I have is the following:

<template>
  <v-app>
    <v-navigation-drawer ... />
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

And the view with the calendar is more or less like:

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar />
      </v-sheet>
    </v-col>
  </v-row>
</template>

I hope it helps!

Upvotes: 1

Hamed Baatour
Hamed Baatour

Reputation: 6922

  1. open up your root component App.vue
  2. make sure your style tag doesn't have the scoped attribute so CSS can apply globally
  3. add the following CSS 
.v-navigation-drawer {
z-index: 999999 !important;
}

Upvotes: 3

Related Questions