Vuetify: inside a v-menu, a v-selector hidden behind the v-menu

Created on 28 Aug 2017  Â·  15Comments  Â·  Source: vuetifyjs/vuetify

Steps to reproduce

Inside a v-menu , a v-selector has z-index issue, the v-select is hidden behind the v-menu

Versions


vue vesrion 0.14.11

What is expected ?


v-select should be in front of v-menu

What is actually happening ?


v-select is behind v-menu , both have same z-index value

Reproduction Link


screen shot 2017-08-28 at 2 35 20 pm

needs reproduction

Most helpful comment

That is unfortunately due to using the lazy prop. Because of that, the order in which the components are booted causes the detached content areas to line up in a way that makes the menu fall behind the dialog.

Here is an example of how to handle that, using the new z-index prop on v-menu https://codepen.io/anon/pen/eEPXYX?editors=1000

All 15 comments

Yes, i have this problem too.

v-select

I am also facing the same problem.

People are no doubt having issues, but we still need a reproduction. You can observe https://vuetifyjs.com/components/dialogs #5 and it is working as expected.

Same problem!
seleccion_022

When I had the css file linked in my index.html using the unpkg link, this was happening. However when I imported the css via webpack, it restored functionality to my menus/selects.

Try importing the css file from node_modules

It works! Thanks @baroncurtin2

Has anyone been able to reproduce this in a codepen?

@johnleider i have reproduce the issue in code pen
https://codepen.io/xaayin/pen/dzgaxG?editors=1000

That is unfortunately due to using the lazy prop. Because of that, the order in which the components are booted causes the detached content areas to line up in a way that makes the menu fall behind the dialog.

Here is an example of how to handle that, using the new z-index prop on v-menu https://codepen.io/anon/pen/eEPXYX?editors=1000

@johnleider thanks 😃

Hello....

I am still facing the problem.
Can you just brief me about the solution. My app is mostly dependent on v-menu and v-select and I am facing problem in both the components.

Please help me out

Create a new issue

On Aug 30, 2017 2:51 AM, "kvijay0007" notifications@github.com wrote:

Hello....

I am still facing the problem.
Can you just brief me about the solution. My app is mostly dependent on
v-menu and v-select and I am facing problem in both the components.

Please help me out

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/1502#issuecomment-325899187,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgs3njXusYzXW5-06fi9MKdPcJ8XIks5sdQZWgaJpZM4PEH48
.

Hi @johnleider ..
Thanks for your reply.

I have rectified the problem.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smousa picture smousa  Â·  3Comments

Webifi picture Webifi  Â·  3Comments

sebastianmacias picture sebastianmacias  Â·  3Comments

chriswa picture chriswa  Â·  3Comments

itanka9 picture itanka9  Â·  3Comments