Skip to content

Can't use it with Vuetify? #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MuhaddiMu opened this issue Nov 20, 2019 · 3 comments
Closed

Can't use it with Vuetify? #41

MuhaddiMu opened this issue Nov 20, 2019 · 3 comments

Comments

@MuhaddiMu
Copy link

I want to use it with Vuetify as Vuetify parallax doesn't allow so many options. Using vue-parallax inside Vuetify breaks things and doesn't work as expected.

Any help would be highly valued

@apertureless
Copy link
Owner

What do you mean with, it breaks ?
Can you maybe provide a small codepen for reproduction?

@MuhaddiMu
Copy link
Author

@apertureless Thank you for your response.

Here is the code sandbox, https://codesandbox.io/s/vuetify-playground-gd9lf

By breaking, I mean that the <parallax> content is not showing up. It's just showing a blank screen. It looks like Vuetify is overriding the styles. Any possible fix to this?

@apertureless
Copy link
Owner

Thanks for the sandbox.
It seems to be an css (z-index) issue.
Because your container is overlapping everything.

If you add

position: realtive;
z-index: 0

to your container class, it is fixed.

The parallax effect relys currently heavily on css styling. So it can often come to problems.

Bildschirmfoto 2019-11-21 um 12 27 31

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants