Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Bug Report][3.0.0-beta.1] Vuetify 3 CSS import causes incorrect overlay behaviors
See original GitHub issueEnvironment
Vuetify Version: 3.0.0-alpha.13 Vue Version: 3.2.25 Browsers: Chrome 99.0.4844.51 OS: Linux x86_64
Steps to reproduce
I’m using nightly, but it isn’t an option in the dropdown. It’s broken in alpha 13 also.
- Clone reproduction repo
- Run
yarn - run
yarn dev - Launch “Open” dialog, see it stack incorrectly behind v-app-bar and v-nav-drawer.
Expected Behavior
fullscreen dialog should be in front of app bar and nav drawer
Actual Behavior
fullscreen dialog is behind app bar and nav drawer.
Reproduction Link
https://github.com/subdavis/ts-repro-vuetify-2022
Other comments
Something is wrong with CSS. I couldn’t reproduce in codepen, so I looked at where the CSS was coming from and swapped it in my local app.
This is a CSS bug, where the documentation about how to import CSS is wrong.
import 'vuetify/styles'; // BROKEN
// import 'vuetify/dist/vuetify.css'; // WORKING
However, this roughly doubles the size of my CSS bundle, and I don’t know why.
Screenshots
https://user-images.githubusercontent.com/4214172/158239157-78e21401-a14d-4efa-b6a1-0acbfa6bc036.mp4
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@emikoshi #15134
This was fixed by 11fddffcb9334856a54938267c634774653b909f
Just to add, had the same experience as @subdavis. I was implementing some button tooltips that were within a dialog. I thought it was broken but the tooltips were being spawned underneath the dialog overlay. This was using the
import "vuetify/styles";method.I tried implementing with a dialog codepen on the Vuetify website and noticed it working, so I went ahead and used
import "vuetify/dist/vuetify.css";instead and it worked just fine/tooltips spawning above the dialog in my app.This is with the current beta2 and nightly as of 5/20/2022