javascript - Vuetify navigation drawer issue - Stack Overflow

admin管理员组

文章数量:1287652

I want to have a vuetify "temporary navigation drawer" with scaling width. The vuetify ponent es with 300px width by default, so I overrid it like so (using "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 bee 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: / Zoom out with the navigation drawer unactivated to see what I'm talking about

I want to have a vuetify "temporary navigation drawer" with scaling width. The vuetify ponent es with 300px width by default, so I overrid it like so (using https://vuetifyjs./en/ponents/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 bee 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/agreyfield91/tgpfhn8m/957/ Zoom out with the navigation drawer unactivated to see what I'm talking about

• javascript
• css
• vue.js
• vuetify.js

Share Improve this question Follow edited Aug 7, 2018 at 21:54 user7548189 asked Aug 2, 2018 at 2:14 user7548189user7548189 1,01666 gold badges1818 silver badges3232 bronze badges 3

• try to use vw , it's relative to 1% of the width of the viewport – Chunbin Li Commented Aug 2, 2018 at 2:32
• If you can provide a jsfiddle or codepen that'd help – Matti Price Commented Aug 7, 2018 at 21:40
• Added jsfiddle. – user7548189 Commented Aug 7, 2018 at 21:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +50

So the vuetify ponent doesn't support using anything but pixels for the width property of the ponent 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;
}

本文标签： javascriptVuetify navigation drawer issueStack Overflow