Vuetify: [Bug Report] v-navigation-drawer: when using clipped and temporary, clipped is disabled
Environment
Vuetify Version: 2.0.7
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10
Steps to reproduce
https://codepen.io/shlomitsibony/pen/BaBLypv
Expected Behavior
drawer under the toolbar
Actual Behavior
drawer not under the toolbar
Reproduction Link
https://codepen.io/shlomitsibony/pen/BaBLypv
Other comments
removing temporary attribute will solve it
ShlomitSibony
All 3 comments
Unfortunately that is not how they are intended to work. Here is a workaround for your issue but this is not a bug.
johnleider
on 6 Sep 2019
Description from official documentation:
A clipped drawer rests under the application toolbar
A little more extensive description that clipped do not work for some combinations of other properties would save lot of time... Possible to update the documentation if this is default behaviour.
CMQNordic
on 26 Jun 2020
The workaround above pushes the drawer down. Anything at the bottom of the drawer are unable to see, so at least we also need :height="`calc(100vh - ${$vuetify.application.top}px)`".
And in the latest version (2.3.6), the overlay z-index is now 7 rather than 5 in v2.0.7. This darkens the toolbar as well. So we also need to use CSS to change the z-index of v-app-bar to at least 7.
Yihao-G
on 27 Jul 2020
Related issues
Webifi
路
3Comments
chriswa
路
3Comments
ricardovanlaarhoven
路
3Comments
paladin2005
路
3Comments
sebastianmacias
路
3Comments
Most helpful comment
Description from official documentation:
A clipped drawer rests under the application toolbar
A little more extensive description that clipped do not work for some combinations of other properties would save lot of time... Possible to update the documentation if this is default behaviour.