CODEWITHSUNDEEP
leafletnavigation-drawervuetify.jsz-index
starleaf1
starleaf1

Reputation: 2872

Preventing vue2-leaflet map from overlaying itself on top of Vuetify's navigation drawer

I'm using Vuetify to build an app that displays local points of interest. The app uses vue2-leaflet to display the maps. Unfortunately the map pokes out of navigation drawers, dialogs, and darkener screen overlays. Here are images demonstrating it:

Navigation Drawer off - Showing where the map is supposed to be. Navigation Draawer on - Map is on top of navigation drawer

How can I fix it?

Upvotes: 1

Views: 875

Answers (2)

trainoasis
trainoasis

Reputation: 6720

In my opinion if z-index needs to be changed: it's better modifying the map itself - rather than Vuetify's css which can affect other components across the app.

In the component where leaflet map is registered add

<style lang="scss">
  .vue2leaflet-map {
    z-index: 1;
  }
</style>

This works for me using Vuetify + Vue2-leaflet (latest for today's date). Haven't noticed any issues with other Vuetify components so far.

Upvotes: 4

morphatic
morphatic

Reputation: 7955

This is a z-index issue. Try adding the following to your CSS:

.v-navigation-drawer--temporary {
    z-index: 1001;
}

You can see a working example on Codepen. I think this is the minimum z-index value that will get you the overlay that you want, but you may have to play around with it until you get the right value.

NOTE: this solution only works for navigation drawers. You'll probably have to tweak the z-index values in custom CSS separately for other types of components like dialogs. Alternatively, you might be able to find where the z-index is set in the Leaflet CSS and modify that instead. I'm more familiar with Vuetify so that's what I tweaked.

Upvotes: 0

Related Questions