Vuetify navigation drawer issue
So the vuetify component doesn't support using anything but pixels for the width
property of the component so you have two options. You can use the width
property with pixels instead. Or you can add a bit of a css hack to use vw instead.
Option 1: change your v-navigation-drawer
to the following:
<v-navigation-drawer
v-model="drawer"
absolute
temporary
width="500"
>
Option 2:
add this to your css
.v-navigation-drawer--close.v-navigation-drawer--temporary {
transform: translateX(-13vw) !important;
}
user7548189
Updated on July 30, 2022Comments
-
user7548189 almost 2 years
I want to have a vuetify "temporary navigation drawer" with scaling width. The vuetify component comes with 300px width by default, so I overrid it like so (using https://vuetifyjs.com/en/components/navigation-drawers "Temporary" example)
<template> <v-layout wrap style="height: 200px;" > <v-container> <v-layout justify-center> <v-btn color="pink" dark @click.stop="drawer = !drawer" > Toggle </v-btn> </v-layout> </v-container> <v-navigation-drawer v-model="drawer" absolute temporary style="width: 13vw" //I change width to 13vw here > </v-navigation-drawer> </v-layout> </template>
The problem is, when the menu is not activated, it is hidden 300px to the left of the viewport. My scaling 13vw width, on larger displays, will become larger than 300px, and therefore leave a sliver of the navigation menu unhidden in the left. How can I change the default hiding of the navigation menu?
Jsfiddle: https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ Zoom out with the navigation drawer unactivated to see what I'm talking about