On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
@click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map
a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
@click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, @bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
It does not work anymore at least in
Vuetify 2.1.9
andVue 2.6.x
. The solution by Javier seems to work.
Increase the z-index
style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With