CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.js
theJuls
theJuls

Reputation: 7470

Vuetify navbar grows and scrolls along with a list, when it should remain static

I have an app with a navbar which should remain static on the left side of the screen. On the rest of the screen there is a list of items, which can be unlimited for all I care.

The issue is, the navbar is growing to match that list and is scrolling along. I want it to be static regardless of the list's size.

App.vue file template:

<template>
    <div id="app">
        <v-app>
            <v-row>
                <navbar/>
                <v-main>
                    <v-container class="main-container">
                        <my-item-list/>
                    </v-container>
                </v-main>
            </v-row>
        </v-app>
    </div>
</template>

This is what my Navbar component looks like:

<template>
    <v-navigation-drawer v-model="drawer" :mini-variant.sync="mini" permanent>
        <v-layout justify-space-between column fill-height>
            <v-list>
                <v-list-item class="px-2">
                    <v-list-item-avatar>
                        <v-img src="http://placekitten.com/200/300"></v-img>
                    </v-list-item-avatar>
                </v-list-item>

                <v-divider></v-divider>
                <v-list-item
                    v-for="setting in settings.top"
                    :key="setting.id"
                />
            </v-list>

            <v-list>
                <v-list-item
                    v-for="setting in settings.bottom"
                    :key="setting.id"
                />
            </v-list>
        </v-layout>
    </v-navigation-drawer>
</template>

Here are also some screenshots of what is going on:

enter image description here

As you can see here I have all the item of my navbar nicely fitting in my screen, which is how I want it.

However, in the next image:

enter image description here

We now have so many items that it causes the screen to scroll, which is fine btw. The issue is, you can see that the navbar also stretches out to match the scrolling of the items. I would like the navbar to stay just the same as in the first image regardless of how many items are added.

Upvotes: 2

Views: 956

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362610

The problem is using v-row to wrap the entire layout. v-row makes the layout flexbox and therefore both child items (the navbar and the main content) become the same height. Remove the v-row and instead use v-content around the main container list. Finally, use the app prop on the v-navigation-drawer...

 <v-app>
        <v-navigation-drawer
          v-model="mainSidebarDrawer"
          permanent
          app
          expand-on-hover
          @transitionend="collapseSubItems"
        >
            <v-layout justify-space-between column fill-height>
              <v-list>
                ..
              </v-list>
              <v-list>
                    ..
              </v-list>
            </v-layout>
        </v-navigation-drawer>
        <v-content>
            <v-main>
            </v-main>
        </v-content>
</v-app>

Demo

Upvotes: 1

Related Questions