va-select dropdown is rendered below other components

[JohanAndreVisma]

Vuestic-ui version: 1.6.4

Steps to reproduce Just a simple page with va-select and other gui components.
Build using vue-cli and deploy to Azure.

What is the expected behavior? va-select dropdown is rendered above other components.

What is the current behavior? va-select dropdown is rendered above other components.

Other information I think that the necessary z-index css info gets lost somehow during the build and deployment to Azure.
When running locally it works. So either some problem with vuestic or there might be a problem with my project and or build process.

[m0ksem]

You can manually try to set z-index: 999999 to .va-dropdown__content. If it doesn't help, you probably have z-index issue somewhere above in DOM tree. You can use prevent-overflow prop to render dropdown content at the highest layer or try to find z-index issues. I would recommend not to use prevent-overflow in general, but it okay to use it in such cases.

LMK if changing z-index to 99999999 helped.

[JohanAndreVisma]

@m0ksem Yes I will try to set z-index manually today. I expect it to work.
It does not seems like I have some other z-index issue in DOM. I never set any z-index in my own css styles
and it also works locally.
I think the problem is caused by the fact that part of the Vuestic css that sets z-index does not exist in my production build.
Could it be some so called tree shaking that has removed it.
I attached a screenshot where the only va-dropdown styling found in production can be seen.

[JohanAndreVisma]

When running locally I also have css styling for .va-dropdown__content-wrapper but this seems to be missing from production.

[m0ksem]

When running locally I also have css styling for .va-dropdown__content-wrapper but this seems to be missing from production.

Thanks. Can confirm the same issue using vite.

[JohanAndreVisma]

Does vuestic has snapshot tests that checks these kind of bugs? If not I guess that would be a good idea.

[m0ksem]

Does vuestic has snapshot tests that checks these kind of bugs? If not I guess that would be a good idea.

I think it was one time edge case, which is hard to predict and write a test. If you have any suggestions related to testing, I would appreciate making another issue and help us with it!

[JohanAndreVisma]

@m0ksem As expected adding this to my own css file solved the problem:
.va-dropdown__content-wrapper { z-index: 1000; }

[m0ksem]

@m0ksem As expected adding this to my own css file solved the problem:
.va-dropdown__content-wrapper { z-index: 1000; }

I made a pr fixing this, so you can remove this code next week.

[JohanAndreVisma]

@m0ksem Great, thanks for the quick fix