Make vuetify dropdown menu overflow drawer - javascript

I am having problem with vuetify dropdown menu, when I add just drop down and scroll down, content from menu goes up with page on scroll.
On github I found attach as answer but now it stays under drawer side like this:
Vue.use(Vuetify);
new Vue({
el: "#app",
data: {
model: true,
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.js"></script>
<div id="app">
<v-navigation-drawer v-model="model" fixed app style="background: red;" width="100">
<v-menu :close-on-content-click="false" offset-y attach>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-card-text style="overflow-y:auto; max-height:300px;">
<v-list>
<v-list-tile avatar>
<v-list-tile-avatar>
<img src="" alt="John">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John some</v-list-tile-title>
<v-list-tile-sub-title>body</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon small>
<v-icon>remove_red_eye</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<v-divider></v-divider>
</v-list>
</v-card-text>
</v-card>
</v-menu>
</v-navigation-drawer>
</div>

Related

v-menu close before v-list-item onclick is seen

I have the following menu setup with vue and vuetify:
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
>
Click me
</v-btn>
</template>
<v-list>
<v-list-item v-if="!t"
#click="t=!t">
<v-list-item-title>Option 1</v-list-item-title>
</v-list-item>
<v-list-item v-if="t"
#click="t=!t">
<v-list-item-title>Option 2</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
t: false
},
})
After clicking the menu open, and clicking "Option 1", I intend for the menu to close, and the subsequent menu open to show "Option 2". This happens, but the transition from "Option 1" to "Option 2" is seen during the menu close (gif example below). The intention is to not see the transition occur while the menu is closing. (No transition in the list until menu exits)
You can wrap the list items in a transition-group:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({ t: false })
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on }">
<v-btn v-on="on">Click me</v-btn>
</template>
<transition-group tag="v-list" name="fade">
<v-list-item v-if="!t" #click="t=!t" key="1">
<v-list-item-title>Option 1</v-list-item-title>
</v-list-item>
<v-list-item v-else #click="t=!t" key="2">
<v-list-item-title>Option 2</v-list-item-title>
</v-list-item>
</transition-group>
</v-menu>
</div>
</v-app>
</div>

How can i open a v-dialog outside of a template?

How can i open a dialog outside of the template?
<v-dialog v-model="dialog_elimina_richiesta" activator="dialog_elimina_richiesta" persistent>
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Disagree</v-btn>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<template v-slot:item.data_richiesta="{ item }">{{item.data_richiesta | formatDate}}</template>
<template v-slot:item.actions="{ item }">
<v-icon medium class="mr-2" color="purple" #click="editAttivita(item)">mdi-pencil</v-icon>
<v-icon
medium
class="mr-2"
color="red"
#click="detailDeleterichiesta(item)"
>mdi-delete</v-icon>
</template>
and there is my function which should open the dialog, and i don't know why it doesn't work, the property dialog_elimina_richiesta should be accessible from everywhere using this.property, and with the dialog that has the v-model on that property i can't get why it doesn't work
detailDeleterichiesta(item){
this.dialog_elimina_richiesta=true;
console.log(item);
},
Please find the below code where the dialog is opened outside the template.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
dialog: false
}
},
methods: {
openDialog: function() {
this.dialog = true
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-btn color="primary" dark #click.stop="openDialog">
Open Dialog
</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">User Data?</v-card-title>
<v-card-text>
Data </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog = false">
Disagree
</v-btn>
<v-btn color="green darken-1" text #click="dialog = false">
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</body>
</html>

nav drawer disappears when viewer breakpoint is below md

I have a dashboard that needs to be shown if the viewer size sm and above but hidden if is xs.
The original template i had is below. The problem is that below md the navigation drawer would be hidden.
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
EDIT:
This is a full example. Below 1264px width the drawer will disappear:
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
EDIT2: The suggested solution by Mr Rossi also doesnt work and has the same behaviour
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
:class="{'display': $vuetify.breakpoint.smAndUp ? 'none' : 'inline'}"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
If I understand your problem correctly, this is about breakpoints.
You can use Vuetify breakpoints to show or hide some elements.
For example if you want to display it for sm and above you can use this:
:class="$vuetify.breakpoint.smAndUp ? "d-inline" : "d-block"
or simply hide it if is xs:
:class="$vuetify.breakpoint.xsOnly ? "d-inline" : "d-block"
This is the docs page on how to use breakpoints: https://vuetifyjs.com/en/customization/breakpoints#breakpoints
The issue was that for some reason vuetify was moving the navigation drawer 100% to the left and so hiding it. My solution is to override that move by adding the style 'style="transform: translateX(0%);top:48px;"' as below:
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
style="transform: translateX(0%);top:48px;"
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
The translateX overrides the move to the left and top:48px sets the nav drawer to be below an app bar i had in the original, if you dont have an app bar then you wont need it.
I am not sure if this is a bug in vuetify v2.0.11 but it works with that fix. Hope this is helpful to someone, it took me an hour or so to find and fix

How to get Navigation drawer clipped under dialog toolbar Vuetifyjs + Vuejs

I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5
Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
clipped
right
width=""
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
Clipped failed to work but it can be clipped under the dialog tool bar with some inline style. Applied class ='mt-5' and style='top: 16px' to get the desired result.
Codepen
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
right
width=""
height=""
class='mt-5'
style='top: 16px'
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>

VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"

I created a simple Contact list with an input to add the contact items but after I add a few items it's not resizing.
I used this as an example and there is resizing but not in my code:
https://v2.vuejs.org/v2/guide/list.html
Could anyone help me with that?
Here is the Codepen:
https://codepen.io/fabiozanchi/pen/qoBpgd
Vue.component('contact-item', {
template: '\
<v-list-tile-title>\
<button #click="$emit(\'remove\')"><v-icon class="remove-email-icon" color="red">remove_circle</v-icon></button>\{{ title }}\
</v-list-tile-title>\
',
props: ['title']
})
new Vue({
el: '#contact-list',
data: {
newContact: '',
contacts: [],
nextContactId: 1
},
methods: {
addNewContact: function() {
this.contacts.push({
id: this.nextContactId++,
title: this.newContact
})
this.newContact = ''
}
}
})
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.css" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.js"></script>
<div id="contact-list">
<v-app>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar color="blue" dark>
<v-toolbar-title class="text-xs-center">Contacts</v-toolbar-title>
</v-toolbar>
<v-container>
<v-text-field v-model="newContact" #keyup.enter="addNewContact" placeholder="Add new email contact email"></v-text-field>
</v-container>
<v-divider></v-divider>
<v-list class="resize-list">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title is="contact-item" v-for="(contact, index) in contacts" :key="contact.id" :title="contact.title" #remove="contacts.splice(index, 1)">
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Thank you!
Use v-for on v-list-tile component (see vuetify examples).
<v-list-tile
v-for="(contact, index) in contacts"
:key="contact.id"
>
That will produce multiple lis that you want from your examples (currently you only have one li element in list because of v-for on title, so that's why it's not working properly)

Categories

Resources