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?
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>
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">
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
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">
Related
I'm using a v-list component to show available bundles of a product. Basically, I want to be able to press a button in the v-list to remove this bundle (the item on the row of the v-list).
Clicking on the button works fine, but the entire v-list-content is clickable. Even tho it does nothing, I want to disable it so that the user can only click on the button to the right of every v-list-item. Is there a way to do that?
I'm aware that I can add the props disabled to the v-list tag. However, every child tags of the v-list are disabled, so the button becomes unclickable.
<v-list rounded> <!-- disabled -->
<v-list-item-group
v-model="selectedItem"
color="primary"
>
<v-list-item
v-for="(bundle, i) in editForm.suggested_bundles"
:key="i"
>
<v-list-item-content append-icon="mdi-delete">
<v-list-item-title v-text="bundle"></v-list-item-title>
</v-list-item-content>
<v-list-item-icon>
<v-btn #click="removeBundle(editForm.suggested_bundles, bundle)">
<v-icon small>mdi-delete</v-icon>
</v-btn>
</v-list-item-icon>
</v-list-item>
</v-list-item-group>
</v-list>
Any solution for this?
Thanks in advance!
Looks to me that you don't perhaps need the v-list-item-group, so by removing that, only your button is clickable:
<v-list-item v-for="(bundle, i) in editForm.suggested_bundles" :key="i">
<v-list-item-content append-icon="mdi-delete">
<v-list-item-title v-text="bundle"></v-list-item-title>
</v-list-item-content>
<v-list-item-icon >
<v-btn #click="removeBundle(editForm.suggested_bundles[i])">
<v-icon small>mdi-delete</v-icon>
</v-btn>
</v-list-item-icon>
</v-list-item>
If you need to use selectedItem you can always (re)assign the value in removeBundle function. Hopefully this solution will suit your needs.
DEMO for reference
I am utilizing a v-navigation-drawer with the expand-on-hover prop. When it is in its mini variant, I would like to hide the textbox and button at the bottom. The navigation drawer has computed properties, one of which is isMiniVariant. Set to true when collapsed and false when expanded. How can I use this property to bind a style to the div that contains the items I would like to hide?
The codepen/code can be seen below:
https://codepen.io/emicion/pen/zYqerGo?editors=1000
<div id="app">
<v-app id="inspire">
<v-navigation-drawer permanent left app expand-on-hover dark>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-message</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="title">Application</v-list-item-title>
<v-list-item-subtitle>subtext</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<template v-slot:append>
<!-- I want to hide all of this below -->
<div class="pa-2">
<v-textarea no-resize outlined placeholder="Enter comment here..." rows="2"></v-textarea>
<v-btn dark outlined small>
<span>Add Comment</span>
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-app>
</div>
Computed properties listed on VNavigationDrawer
One way is:
add to style
.v-navigation-drawer--mini-variant .hideme {
display:none;
}
add class to the div you want to hide
<div class="pa-2 hideme">
Actually, the better way is to add v-list-group--sub-group to the class of the div
<div class="pa-2 v-list-group--sub-group">
Both are kind of hacky, but I've tried using v-list-group's directly, but it's not easy
I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the component, as well?
<template v-slot:item.hours="{ item }">
<v-menu
:nudge-width="200"
:close-on-content-click="false"
offset-x
>
<template v-slot:activator="{ on }">
<v-chip
color="blue"
dark
v-on="on"
>
{{ parseFloat(item.hours).toFixed(1) }}
</v-chip>
</template>
<v-form #submit.prevent="handleSubmitMenu(item)">
<v-card class="px-5">
<v-text-field
label="Edit Hours"
:value="item.hours"
#input="updateHours"
></v-text-field>
<v-card-actions>
<SubmitButton />
</v-card-actions>
</v-card>
</v-form>
</v-menu>
</template>
handleSubmitMenu(timeEntry) {
const hours = this.hours
this.menu = false
},
Just add v-model for each row.
<v-menu v-model="item.menu">
EDIT you also can use $refs just add it to v-menu and call save() to close it.
<v-menu ref="menu" top offset-y :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Activator
</v-btn>
</template>
<v-btn #click="$refs.menu.save()"></v-btn>
</v-menu>
I am attempting to set up a responsive Vuetify app bar in a Vue.js project. The navigation links are rendered in a 3-dot drop down menu when viewed on a mobile screen.
<v-app>
<v-app-bar color="indigo" dark fixed app>
<v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text to="create">
<span class="mr-2" v-if="activeUser">Create Post</span>
</v-btn>
<v-btn text to="/">
<span class="mr-2" v-if="activeUser">All Posts</span>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="activeUser" to="create">
<v-list-item-title>Create Post</v-list-item-title>
</v-list-item>
<v-list-item v-if="activeUser" to="/">
<v-list-item-title>All Posts</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
The problem is that the 3-dot button renders in both full screen and mobile. I of course want that button to by visible only in mobile. To fix this, I attempted to nest the button inside the v-toolbar-items tags, but that also did not work. Any recommendations on how to configure this app bar to display the 3-dots button only in mobile view? Thanks!
I usually make myself a little helper function
computed: {
isMobile() {
return this.$vuetify.breakpoint.xsOnly;
}
}
The different available breakpoints are listed here.
Then you can use it in your template like
<v-menu v-if="isMobile">
</v-menu>
Alternatively, you can just use the $vuetify directly in your markup.
<v-menu v-if="$vuetify.breakpoint.xsOnly">
</v-menu>
Am trying to add a solo textfield in a toolbar but this fails
so i have
<v-toolbar dense flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field
light
solo
placeholder="Search an item here"
></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
The above produces
which i would like centered vertically on the toolbar (like the title)
I have also tried adding a margin to the solo text field but still it doesnt center it on the toolbar.
I have made a Codepen link for the above isse
What do i need to add to it to make it center
You have to have hide-details on your v-text-field and also height of dense-ed toolbar is to small for v-text-field inside (except you use css to customize v-text-field height).
Here is simple example:
<div id="app">
<v-app>
<v-content>
<v-container style="margin-top:40px">
<v-toolbar flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field hide-details solo single-line class="ml-5" light></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
</v-container>
</v-content>
</v-app>
</div>