scrolling list in Vuetify

Question

Here's my Vuetify code for using list:

<v-list>
    <v-list-tile
            v-for="user in users"
            :key="user.id"
            avatar
            @click=""
    >

        <v-list-tile-content>
            <v-list-tile-title v-text="user.name"></v-list-tile-title>
        </v-list-tile-content>

        <v-btn icon>
            <v-icon>edit</v-icon>
        </v-btn>
    </v-list-tile>
</v-list>

The problem is, that I have over 100 users and the list is not scrollable by default. Is there any trait that helps with it?

Solution 1

I achieved this by giving the style of max-height: 100px and adding vuetify class overflow-y-auto to <v-list></v-list>

For eg:

<v-list
       style="max-height: 100px"
       class="overflow-y-auto"
>
    <template 
             v-for="user in users"
    >
        <v-list-tile
                    :key="user.id"
                    avatar
                    @click=""
        >
            <v-list-tile-content>
                <v-list-tile-title v-text="user.name"></v-list-tile-title>
            </v-list-tile-content>
            <v-btn icon>
                <v-icon>edit</v-icon>
            </v-btn>
        </v-list-tile>        
    </template>    
</v-list>

Solution 2

For vuetify 2.0 the helper class 'scroll-y' is changed to 'overflow-y-auto'. https://github.com/vuetifyjs/vuetify/releases (Just Ctrl+F 'scroll-y') So use.

<v-list style="max-height: 100px" class="overflow-y-auto">

Solution 3

For the record, you don't actually need to use a style attribute at all, you can do it with the overflow-y-auto class and a max-height prop:

<v-list class="overflow-y-auto" max-height="400">

Vue 2.6.10, Vuetify 2.0.0

Solution 4

That solution using class and style did not work for me. The vertical scroll appeared outside the list and was applied to the div that was wrapping it.

This solution did work perfect:

<v-list three-line max-height="400px" class="overflow-y-auto">

View more solutions