3

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

noel293
  • 514
  • 5
  • 21

4 Answers4

3

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>

Akshaf Mulla
  • 31
  • 2
1

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;
Schnaffon
  • 101
  • 1
  • 10
0

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

Fernando Gonzalez
  • 801
  • 7
  • 8
0

Just add app attribute to v-navigation-drawer tag

<v-navigation-drawer
 temporary
 app
 width="280"
 height="100vh"
>
Mohammed Frah
  • 1