search

epicmaxco / vuestic-ui

Free and Open Source UI Library for Vue 3 🤘
https://vuestic.dev
MIT License
3.34k stars 324 forks source link

va-select dropdown is rendered below other components #3399

Closed JohanAndreVisma closed 1 year ago

JohanAndreVisma commented 1 year ago

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. image-20230502-073044

m0ksem commented 1 year ago

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 commented 1 year ago

@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.

z-index error prod

JohanAndreVisma commented 1 year ago

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

m0ksem commented 1 year ago

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 commented 1 year ago

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

m0ksem commented 1 year ago

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 commented 1 year ago

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

m0ksem commented 1 year ago

@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 commented 1 year ago

@m0ksem Great, thanks for the quick fix