Vuetify: 1.3.4
Vue: 2.5.17
Browsers: Chrome 70.0.3538.77
OS: Windows 10
Place a tooltip inside a nav-drawer inside a fullscreen dialog
Tooltip is visible
Tooltip is _not_ visible
https://codepen.io/mrodal/pen/rqEQXO?editors=1010
tha tooltip gets z-index 8, and the dialog is 202
The same happens with selects. I updated the codepen
For anyone with this problem, @johnleider recommended waiting for 2.0 since there will be major changes in the logic that determines the z-index and the layout in general, so a workaround for now that worked for me is setting z-index: inherit on the nav drawer
ladorm Today at 1:11 PM
hi guys, im thinking of making a PR for this https://github.com/vuetifyjs/vuetify/issues/5494 , but first I want to see what you think of what I think can solve the issue
the problem seems to be that the nav drawer doesnt inherit from the stackable mixin, so it has a fixed z-index, and when the tooltip and the select menu uses the stackable getMaxZIndex, it finds the nav drawer as the closest parent with z-index, and uses that one, which is smaller than the one from the dialog
johnleider Today at 1:13 PM
this is because tooltips aren't part of stackable
and that logic is being moved into a service for 2.0 to better handle various layouts. With that being said, I'm undecided on how tooltip fits into this
ladorm Today at 1:13 PM
they are actually, they are menuable, and menuable is stackable
johnleider Today at 1:14 PM
sorry, dependent
stackable/dependent
can work in tandem
at least I think
ladorm Today at 1:16 PM
but for both the tooltip and the select menu, the getMaxZIndex gets called and that z-index gets set on them
and its taking the fixed small z-index from the nav drawer
johnleider Today at 1:16 PM
Well, regardless of how it is setup, that is all moving to the core
so the framework can keep track of it
and remove the dom crawling
ladorm Today at 1:17 PM
ok, so should I skip making a pr then and try to find a workarond for now?
johnleider Today at 1:17 PM
I would say skip it for now
Most helpful comment
Short version:
For anyone with this problem, @johnleider recommended waiting for 2.0 since there will be major changes in the logic that determines the z-index and the layout in general, so a workaround for now that worked for me is setting
z-index: inheriton the nav drawerLong version:
ladorm Today at 1:11 PM
hi guys, im thinking of making a PR for this https://github.com/vuetifyjs/vuetify/issues/5494 , but first I want to see what you think of what I think can solve the issue
the problem seems to be that the nav drawer doesnt inherit from the stackable mixin, so it has a fixed z-index, and when the tooltip and the select menu uses the stackable getMaxZIndex, it finds the nav drawer as the closest parent with z-index, and uses that one, which is smaller than the one from the dialog
johnleider Today at 1:13 PM
this is because tooltips aren't part of stackable
and that logic is being moved into a service for 2.0 to better handle various layouts. With that being said, I'm undecided on how tooltip fits into this
ladorm Today at 1:13 PM
they are actually, they are menuable, and menuable is stackable
johnleider Today at 1:14 PM
sorry, dependent
stackable/dependent
can work in tandem
at least I think
ladorm Today at 1:16 PM
but for both the tooltip and the select menu, the getMaxZIndex gets called and that z-index gets set on them
and its taking the fixed small z-index from the nav drawer
johnleider Today at 1:16 PM
Well, regardless of how it is setup, that is all moving to the core
so the framework can keep track of it
and remove the dom crawling
ladorm Today at 1:17 PM
ok, so should I skip making a pr then and try to find a workarond for now?
johnleider Today at 1:17 PM
I would say skip it for now