CODEWITHSUNDEEP
javascriptcssvue.jsfrontendvuetify.js
Zbyszek Kisły
Zbyszek Kisły

Reputation: 2238

scrolling list in Vuetify

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?

Upvotes: 24

Views: 42620

Answers (4)

leftclickben
leftclickben

Reputation: 4614

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">

Working with Vue 2.6.10 and Vuetify 2.0.0, might not work for newer Vuetify 2 versions.

Upvotes: 18

Javier Escobar
Javier Escobar

Reputation: 101

The 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">

Upvotes: 3

Baldeep Singh Kwatra
Baldeep Singh Kwatra

Reputation: 1174

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">

Upvotes: 30

sml-sgr
sml-sgr

Reputation: 912

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>

Upvotes: 59

Related Questions