CODEWITHSUNDEEP
vue.jsscrollvuetify.jsdrawer
noel293
noel293

Reputation: 504

VuetifyJS - Scrolling v-navigation-drawer

I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.

So far so good it is done and it looks exactly as I wanted it.

The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.

I have tried with css but nothing happens. Does anyone have any hint on what I should do?

I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.

What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:

.scrollable{ height:100%; overflow:auto;}

I also tried this as it was the closest thing I could find to my problem

Upvotes: 3

Views: 8305

Answers (4)

Mohammed Frah
Mohammed Frah

Reputation: 1

Just add app attribute to v-navigation-drawer tag

<v-navigation-drawer
 temporary
 app
 width="280"
 height="100vh"
>

Upvotes: 0

Fernando Gonzalez
Fernando Gonzalez

Reputation: 811

For me, the problem was that i did not put the app attribute on th v-navigation-drawer

I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>

For: <v-navigation-drawer absolute temporary app ></v-navigation-drawer>

The adittion of app allow scrolling on my v-navigation-drawer

Upvotes: 0

Akshaf Mulla
Akshaf Mulla

Reputation: 31

I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.

<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>

Upvotes: 3

Schnaffon
Schnaffon

Reputation: 111

Navigation drawers should be scrollable if you add the app option as per the documentation

I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.

I just added this style to my drawer and it did the trick :

calc(100% - 48px); height: 100vh;

Upvotes: 1

Related Questions