Menu
I have created v-list in flex layout and the v-list fill the remaining space in horizontally in column. But if the list contains lots of element which is total height is bigger than column height then the list sticking out.
I have tried to add max-height and fix height to the v-list, but then the list items sticking out from wrapper v-list. And I have tried to add v-scroll but that haven't helped.
So how can I create v-list which will be scrollable when the list has more items than can be appear in div?
595
Virtual scrolling lists are highly performant, especially when you have a large list of items on your webpage. Using a virtual scroll list can increase the page load speed and improve the user experience overall! Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session.
Vuetify — A Material Design Framework for Vue.js Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.
We can create snackbars in Vuetify using the v-snackbar component. In the code below, we create a "Close" button in the action slot of the snackbar. When this button is clicked, the snackbar variable is set to false to hide the snackbar. snackbar is false by default, so at first we can only see the button that opens the snackbar:
Activator slot redefinition in vuetify v-menu component 11 Vuetify v-app-bar-title component is truncated with plenty of room to spare Hot Network Questions
Try to add the following CSS rules :
.v-list{
height:200px;/* or any height you want */
overflow-y:auto
}
check this pen to see the demo
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
