scrolling list in Vuetify

Tutu Kaeen picture Tutu Kaeen · Feb 27, 2019 · Viewed 19.4k times · Source

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?

Answer

SSaaml picture SSaaml · Feb 28, 2019

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>