I have a <v-navigation-drawer> which contains multiple <v-cards>. When clicking on a button, more cards appear and they overflow the screen; there's thus a scrollbar that appears. The problem is that this changes the width of the cards, which makes the transition look quite bad.
Is there a way to already reserve space for the scrollbar, or to overlay it on top of the card rather than making it change the width of the card?
I already tried playing with overflow-y, but haven't found any one working...
Before clicking on the button
After clicking on the button
Here is a sample code for my problem:
<template>
<div>
<v-navigation-drawer app left width="450" clipped>
<v-card>
<img src="https://pbs.twimg.com/profile_images/875996174305472512/upM71pVR.jpg" />
</v-card>
<v-card>
<v-btn #click="showImage = !showImage">Show Image</v-btn>
</v-card>
<v-card v-if="showImage">
<img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg" />
</v-card>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
name: "TopBar",
data: () => ({
showImage: false
})
};
</script>
Related
I have got a page where there are several components, in one component I have a <v-speed-dial> with a fab button. When I open the speed dial it is placed under the component that's below it.
Here a picture so you can imagine what I am talking about.
Here is the code:
<template>
<v-card outlined>
<v-card-title>Selection</v-card-title>
<v-toolbar height="80" elevation="0">
<v-speed-dial class="mb-5" direction="bottom">
<template v-slot:activator>
<v-btn text fab>
<v-icon :color="myIcon.color" x-large>{{ myIcon.name }}</v-icon>
</v-btn>
</template>
<v-btn fab small color="green">
<v-icon color="white" x-large #click="changeStatusToUp()">mdi-chevron-up</v-icon>
</v-btn>
<v-btn fab small color="grey">
<v-icon color="white" x-large #click="changeStatusToMid()">mdi-unfold-less-vertical</v-icon>
</v-btn>
<v-btn fab small color="red">
<v-icon color="white" x-large #click="changeStatusToDown()">mdi-chevron-down</v-icon>
</v-btn>
</v-speed-dial>
</v-toolbar>
</v-card>
And here the JavaScript code, if it matters:
<script>
export default {
name: "Selection",
data() {
return {
myIcon: {
name: 'mdi-unfold-less-vertical',
color: 'grey'
},
colors: {
red: 'red',
green: 'green',
grey: 'grey'
}
}
},
props: {},
computed: {},
methods: {
changeStatusToUp() {
this.myIcon.name = 'mdi-chevron-up'
this.myIcon.color = 'green'
}
,
changeStatusToDown() {
this.myIcon.name = 'mdi-chevron-down'
this.myIcon.color = 'red'
}
,
changeStatusToMid() {
this.myIcon.name = 'mdi-unfold-less-vertical'
this.myIcon.color = 'grey'
}
}
};
Everything works as intended, if I put choose a different direction for the <v-speed-dial> to open, it shows fine, it's just hidden behind the component beneath it.
Any help is appreciated!
I think the problem is that your speed dial is inside a v-toolbar.
The toolbar component is used for rendering a navigation header generally at the top of the app.
Speed dials are floating buttons generally used at the bottom of the app.
If you remove the v-toolbar, your problem should get fixed.
EDIT: The vuetify docs here, show 2 different examples:
One where v-btn is used inside v-toolbar
The other example is using v-speed-dial
I think you ended up combining the two. Please go through the examples given in the docs and use the correct HTML based on your requirement
I was trying to keep the Vuetify dialog title and the headers of the content fixed to the top while scrolling. I used "style:"position:fixed".
When I scroll, the heading and the headers become out of the view. The current code is as given below
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialogTips" max-width=800>
<v-card>
<v-card-title
class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
{{dialogTipsHeading}}</v-card-title>
<!-- Displaying Tips matrix Headers-->
<v-layout
v-if="dialogTableOn"
row wrap
class="text-xs-center mx-auto pt-2 justify-space-between teal--text darken-4 "
style="width:600px;"
>
....
Table Headers
....
</v-layout>
....
some Table of content
....
<!-- Diplaying dialog buttons -->
<v-layout
>
<v-card-actions
class="text-xs-center mx-auto justify-space-around">
<v-btn v-if="dialogTipsBtn1" class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text #click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
<v-btn v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text #click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
</v-card-actions>
</v-layout>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
Here is the function that calls the dialog
handleDialog()
{
this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
this.dialogTipsBtn1 = ""
this.dialogTipsBtn2 = "OK"
this.dialogTableOn = true,
this.isDialogTips = true
}
The result that I get is like this
Please suggest a way to keep the content(The heading and the Table headers) fixed at the top and to scroll the table content. Also, is there a way to keep the action buttons always visible?
Thank you in advance!
Finally, I fixed it myself
It was about adding a prop "scrollable" in the "v-dialog" component and then setting the height of the "v-card-text" component
<v-dialog scrollable v-model = "isDialogTips"
max-width = 800 >
....
code (title/heading/headers)
...
<v-card-text
style = "height: 600px;" >
....
code
....
</v-card-text>
</v-dialog>
Now, the result, as desired, looks like this. The heading and the headers stay at the top and the button is always visible at the bottom.
I have a v-btn.
When clicked on it, I want to have a dropdown to it. I don't want the dropdown to be a list, but the form with 3 labels and 3 text fields. Each label for each textfield.
Problem 1) When showing labels and textfields, they are all at the same line(horizontally). how do I make label and textfield below it?
Problem 2) WHen that dropdown appears and I put mouse on textfield, dropdown completely closes. I only want to close it when i click the button which also resides on that dropdown at the end of the form. how do I not close it when clicked on it ?
P.S. I am using v-menu for dropdown.
Problem 1
Can you please provide a small example of your code?
In Vuetify you can just use a v-text-field and give it a label via the label prop.
Problem 2
You can set close-on-click and close-on-content-click to false to prevent the dropdown from closing.
Small example:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
menuOpen: false,
firstname: "",
lastname: ""
};
},
methods: {
save() {
alert(`Your name is ${this.firstname} ${this.lastname}!`);
this.menuOpen = false;
}
}
});
#app { height: 400px; }
<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#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-menu offset-y :close-on-click="false" :close-on-content-click="false" v-model="menuOpen">
<template v-slot:activator="{ on }">
<v-btn v-on="on" class="ma-4">BUTTON</v-btn>
</template>
<v-card>
<v-card-text>
<v-text-field label="First Name" v-model="firstname"></v-text-field>
<v-text-field label="Last Name" v-model="lastname"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="grey darken-2" #click="menuOpen = false" dark>CANCEL</v-btn>
<v-btn color="primary" #click="save">OK</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-content>
</v-app>
</div>
1) Vuetify text fields have a prop named "label" - if you bind the label text to this prop it'll automatically appear above the text field. Otherwise, if you for some reason want to create your own label, just wrap both the label and input in a v-layout OR wrap the label and input in the same element (e.g. div) and make sure the label is a div
<v-flex xs12 sm6>
<div>test label</div>
<v-text-field
v-model="title"
:rules="rules"
counter="25"
label="Outline"
outline
></v-text-field>
</v-flex>
2) the menu has a "close-on-content-click" prop that defaults to true, which you can set to false. This will prevent the menu from closing on click
First of all, i've already read this post but it didn't help me (or i wasn't able to solve with that)
I've got a component which is a Vuetify Modal (ModalTurno.vue).
I'm trying to open this from a button in my Bottom Nav (bottomNav.Vue) (also a component).
I was even able to do that! but it opens on the Bottom Nav div. So I'd like to open this on my main vue (Turno.Vue) so i'll be able to see the whole modal. This is driven me crazy
Vuetify Modal (ModalTurno.Vue):
<template>
<v-dialog v-model="dialog" persistent max-width="500px" >
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
</v-card>
</v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
})
}
</script>
Bottom Nav (bottomNav.Vue) (Where the button is):
<template>
<v-card height="200px" flat>
<v-bottom-nav
:value="true"
color="indigo"
fixed
>
<v-btn
dark
flat
value="favorites">
<span>Agregar turno</span>
<v-icon>add_circle</v-icon>
</v-btn> <!--THIS IS THE BUTTON TO OPEN THE DIALOG -->
</v-bottom-nav>
</v-card>
</template>
<script>
export default {
name: 'header',
data () {
return {
bottomNav: 'recent'
}
}
}
</script>
Turno.Vue (Where the modal should be displayed):
<template>
<div>
<bottomNav> </bottomNav>
<modalTurno> </modalTurno>
</div>
</template>
<script>
import bottomNav from "./components/bottomNav.vue";
import modalTurno from "./components/ModalTurno.vue";
export default {
name: 'turno',
components: {
bottomNav,
modalTurno
}
}
</script>
Thanks to everyone who use his/her time to read this post!
You could do this by :
in Turno.vue
add ref="modalTurno" to (to make this component accessible via this.$refs.modalTurno - Accessing Child Component Instances & Child Elements)
in bottomNav.Vue
add #click="$parent.$refs.modalTurno.dialog = true" to v-btn (this will update dialog in modalTurno)
I setting up my browser window to mobile size to show the toolbar icon of navigation-drawer. When I click the toolbar icon then navigation-drawer will show up but when I switch back my browser to 100%, navigation-drawer will not disappear and it turns into permanent. So by that I can't close the drawer anymore because toolbar only appears in mobile window which supposed to be close during the resize back to desktop size
Heres my template
<template>
<div>
<v-navigation-drawer
v-model="sideNav.model"
absolute
overflow
disable-resize-watcher
disable-route-watcher
left
persistent
:app="sideNav.type = ''"
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>supervisor_account</v-icon>
</v-list-tile-action>
<v-list-tile-content>Login</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app dark class="primary" >
<v-toolbar-side-icon
#click.stop="sideNav.model = !sideNav.model" class="hidden-sm-and-up"
></v-toolbar-side-icon>
<v-toolbar-title>DevMeetup</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat router :to="{name : 'Home'}">
<v-icon left dark>supervisor_account</v-icon>
Home
</v-btn>
<v-btn flat router :to="{name : 'Login'}" >
<v-icon left dark>supervisor_account</v-icon>
Login
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
</main>
</div>
</template>
<script>
export default {
data : () => ({
sideNav: {
model: false,
type: 'persistent',
clipped: false,
floating: false,
mini: false,
stateless:true
},
isMobile: false
}),
mounted(){
}
}
</script>
You've disabled the resize watcher. Try that.