Vuetify's scrolling list feature allows for smooth navigation through a list

Check out my Vuetify code snippet that utilizes a 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 issue I'm facing is that my list isn't scrollable by default, and since I have a large number of users (over 100), it's causing problems. Are there any features or attributes available to help with making the list scrollable?

javascriptcssvue.jsfrontendvuetify.js

Answer №1

To achieve the desired outcome, I applied the style max-height: 100px and included the Vuetify class overflow-y-auto to the <v-list></v-list>

For example:

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

Answer №2

When using Vuetify version 2.0, the helper class 'scroll-y' has been updated to 'overflow-y-auto'. https://github.com/vuetifyjs/vuetify/releases (Simply search for 'scroll-y') Therefore, make sure to use it like this:

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

Answer №3

Just a heads up, you can achieve the same result without using a style attribute by utilizing the overflow-y-auto class along with the max-height property:

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

This method has been tested with Vue 2.6.10 and Vuetify 2.0.0, but results may vary with newer versions of Vuetify. Check the official documentation for more details.

Answer №4

After trying to use class and style, I found that it didn't solve my issue. The vertical scroll ended up appearing outside of the list and affecting the wrapping div instead.

Here is the solution that worked perfectly for me:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to maintain inline style modifications when the dispatch event is triggered?

I am encountering an issue with inline style changes that are reset once my dispatch function is completed. Even though the rest of my component's functionality is working fine (the counter continues to run), the state is being re-rendered. Here is a ...

javascriptreactjs

What is the best way to ensure a jQuery function runs on duplicated elements?

I have been attempting to construct a webpage featuring cascading dropdowns using jQuery. The goal is to generate a duplicate set of dropdowns when the last dropdown in the current set is altered. I aim for this process to repeat up to 10 times, but I cons ...

javascriptjqueryhtmlcssclone

Vue.js watcher fails to observe changes in v-model

I'm encountering an issue with vue.js. I have set it up so that when a new item is added, it is saved to local storage. However, I also want the item to be saved to local storage when editing it in the input field. I thought this should work because o ...

vue.jslocal-storage

Switch out the ajax data in the input field

Is there a way to update the value in a text box using Ajax? Below is my code snippet: <input type="text" id="category_name" name="category_name" value="<?php if(isset($compName)) { echo ucfirst($compName); ...

javascriptphpjqueryajax

Tips for successfully utilizing v-html in vuejs with nuxt

What approach should I take to display components passed through props and render them using v-html? I came across a rendering solution, but I'm unsure how to implement it in a local component due to my usage of Nuxt. The code Vue.compile(this.vconten ...

vue.jsnuxt.js

Utilizing AngularJS scope within a modal viewport

I am encountering an issue with my simple controller while fetching and displaying messages using $http.get in HTML using ng-repeat. The problem arises when trying to access the messages from a modal window, as it always prints the first message only. ind ...

javascriptangularjs

Leverage JavaScript to retrieve the formatting of an element from an external CSS stylesheet

Check out this HTML snippet: <html> <head> <link rel="stylesheet" type="text/css" media="all" href="style.css"> </head> <body> <div id="test">Testing</div> <script> ...

javascripthtmlcss

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

jqueryhtmlcss

Setting up the data for the AjaxAppender Request Log4Javascript

I am completely new to Log4Javascript and the concept of logging, so please bear with me. My current task involves sending logs to a CouchDB server using a POST request. However, I keep encountering an error from the server: {"error":"bad_request","reaso ...

javascriptcouchdblog4javascript

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

javascriptjqueryhtmltypescript

What are some tips for using copy and paste with Protractor on a Mac using Chrome?

Is there a way to utilize copy and paste functionality with Protractor on a MAC using Chrome? newInput.sendKeys(protractor.Key.chord(browser.controlKey, "a")); newInput.sendKeys(protractor.Key.chord(browser.controlKey, "c")); newInput.sendKeys(protractor. ...

javascriptangularjsprotractor

"Unsuccessful jSON request made by Ajax resulting in undefined response

I've implemented an ajax call to fetch data from a json file and display it in an HTML table. Everything was working fine initially, but now it seems to be returning UNDEFINED. Could it be that the data from the json file hasn't finished loading ...

javascriptjqueryjsonajax

Leverage Hubspot and Google Analytics to transfer session source and medium data

Is there a way to track session source and medium information in HubSpot to identify where a specific visit originated from before a form is filled out or another conversion event occurs? Ideally, this process would involve transferring the session and me ...

javascripthtmljquerygoogle-analyticshubspot

Exploring AngularJS capabilities: Retrieving data and headers from an HttpResponse

Currently, I have a REST API developed using Spring Boot. In the frontend, AngularJS 1.5 is being used. The login service not only sends data but also includes a header. I am wondering how I can effectively read both the data and header on the AngularJS ...

javascriptangularjsspringhttp-headershttpresponse

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

Leverage the power of Angular's library dependency injection with the @inject

I am currently working on a project that involves a library. Within one of the classes in this library, I am attempting to provide a service using @optional, @host, and @inject decorators with an injection token. In the parent component, I have the optio ...

javascriptangulartypescriptdependency-injection

Tips for embedding external URLs into a div element without using an iframe

I need help loading an external URL into a div without using iframe, embed, or object tags. I have tried examples but they do not seem to be working properly. Here is an example of what I have tried: $("#testDiv").load("//localhost:8000/cities/Mountain%2 ...

javascriptjqueryangularjs

angularjs dynamically display expression based on controller value

I'm not the best at explaining things, so I hope you all can understand my needs and provide some assistance here. Below is a view using ng-repeat: <div ng-repeat="item in allitems"> {{displaydata}} </div> In my controller, I have the f ...

javascriptangularjs

The concept of 'this' remains undefined when using a TypeScript Property Decorator

I've been delving into TypeScript decorators focusing on properties, and I crafted the following snippet inspired by various examples: decorator.ts export function logProperty(target: any, key: string) { let val = this[key]; const getter = () ...

javascripttypescriptpropertiesthisdecorator

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss