Vuetify: [Bug Report] Bottom drawer overlay not covering app bar

Created on 26 Jul 2019  路  5Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.0
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Mac OS 10.13.6

Steps to reproduce

Reduce the browser size so that the bottom prop of the navigation drawer gets active and then open the drawer

Expected Behavior

Drawer opens and overlay covers all visible elements outside the drawer.

Actual Behavior

Drawer opens but overlay covers everything except the app bar when you use the app prop in the bar. if you remove the app prop, the overlay covers everything as expected.
Looking at the MD specs, this shouldn't be the case - the overlay should cover the app bar

Reproduction Link

https://codepen.io/anon/pen/qeayqY

Framework bug has workaround

All 5 comments

Somehow this isn't fixed. The navigation drawer has a z-index of 6 then the overlay gets z-index of 5 which is the same as the app bar, so the overlay doesn't cover it (because the overlay is defined before in the DOM).

@fmeyertoens could you provide a reproduction for this?

The original reproduction link above should do as it uses the latest vuetify version (https://unpkg.com/vuetify/dist/vuetify.min.js)
https://codepen.io/anon/pen/qeayqY

Was this page helpful?
0 / 5 - 0 ratings