I'am new on VueJS/Vuetify
There is some transparent space above and below the card inside a menu element
There is the code:
<!-- Menu with card-->
<v-menu
offset-overflow
bottom
left
min-width="200"
offset-y
origin="top right"
transition="scale-transition"
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
>
<template v-slot:activator="{ attrs, on }">
<v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
<v-icon>mdi-airplane</v-icon>
</v-btn>
</template>
<v-card shaped color="red">
<v-list color="transparent">
<v-list-item>
<v-list-item-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
<v-list-item-subtitle>Founder of Vuetify</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text #click="menu = false"> Cancel </v-btn>
<v-btn color="primary" text #click="menu = false"> Save </v-btn>
</v-card-actions>
</v-card>
</v-menu>
I omitted irrelevant code from the components.
I used the shaped prop in v-card and red color to better show the problem
Additionally I checked with vue tools the component so measures are 267 x 230.6
And measures are 267 x 185.6
Does anybody know what I can do to remove the space?
Any help is appreciated. Thank you!
Check this codesandbox I made: https://codesandbox.io/s/stack-73563245-v-menu-rounded-corners-erqlii?file=/src/components/Example.vue
I tried your code but I didn't get those paddings at top and bottom. Just some addtional spaces in top-left and bottom-right corners.
A quick fix for this is just apply the rounded helper classes to your v-menu like this: content-class="rounded-br-xl rounded-tl-xl"
I you want to add some space between the menu and the button just use the nudge-top props and set a negative value to it like: nudge-top="-10"
Related
I am creating a tooltip that appears when an icon is clicked or hovered on; I am using a v-card inside the tooltip:
<v-tooltip bottom min-width="15%">
<template v-slot:activator="{ on, attrs }">
<v-icon small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card flat height="100%" width="100%" class="ma-0 pa-0">
<v-card-text>
Tooltip Text is here
</v-card-text>
</v-card>
</v-tooltip>
The v-card does not fill the tooltip entirely. How do I make the v-card fill the entire tooltip?
It should be better to use <v-menu> tag with open-on-hover prop instead of <v-tooltip>.
Example:
<v-menu
open-on-hover
offset-y
:close-on-content-click="false"
>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card>
...your card data
</v-card>
</v-menu>
Codepen working example
You can easily fill your entire tooltip as I mention there cards are not used here it's made on sheet which could be filled with span tag inside span Whatever you want to write you can...
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon color="primary"
dark
v-bind="attrs"
v-on="on" left>
mdi-information
</v-icon>
</template>
<span>Bottom tooltip</span>
</v-tooltip>
Add this to the v-tooltip content-class="pa-0". You need to override the padding: 5px 16px; that's on .v-tooltip__content. Reference to Vuetify docs on why you use content-class instead of class (detached element like v-dialog and v-menu).
I am using the Vuetify Tooltip component. I want to display the tooltip icon right after the label. I am not sure how can I do that. Please help me figure that out. Right now the icon appears as in image 1
I want it right after the information text.
<v-container fluid>
<v-layout row wrap>
<v-flex xs11 md6 class="add-col-padding-right">
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
</v-flex>
<v-flex xs1 md6 class="add-col-padding-left">
<v-tooltip attach>
<a href='javascript:void(0);' slot="activator">
<i class="material-icons icon-black">
info
</i>
</a>
<span>Please enter the user information correctly.</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
Update
<v-text-field
label='Information'
v-model='dummy.info'
>
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
</v-tooltip>
</template>
</v-text-field>
Update 2
If I put v-tooltip inside then it doesn't work. I want the icon to after right after information.
<v-tooltip right>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
Use the append slot for the v-text-field component. Inside of the v-text-field component, this should work for you:
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
<v-tooltip>
</template>
Edit: You may not have material design icons configured with Vuetify like I do.
Try this, sorry about the confusion.
<v-text-field>
<template v-slot:append>
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-btn v-on="on">test</v-btn>
</template>
<span>Hello World</span>
</v-tooltip>
</template>
</v-text-field>
This should put a v-btn at the end of the text field with a tooltip that reads 'Hello World'
I have the below template (no need to put the here for the purpose of this question):
<template>
<div>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<v-btn icon slot="activator" #click="openConsole">
<v-icon>computer</v-icon>
</v-btn>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
I want a tooltip to be shown whenever mouse hovers on the Console Icon button.
What am I missing here?
Is there an issue with tooltip on Icons inside v-card-actions ?
I looked at this reference https://codepen.io/anon/pen/MOLjVz?editors=1010 but couldn't apply it in my code
Perhaps you're using a newer vuetify version which has different syntax? Try this:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
Check out Vuetify docs for more details
Found the solution myself:
need to add data-app attribute at the root div component:
<div data-app>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</div>
This is my toolbar, and I have problems with the the first button/menu.
I want it, when highlighted to have the same look as when the other buttons are highlighted. I've tried with py-3 and py-2 class on the v-btn, but then it gets squeed or does not fill the entire toolbar erea.
<v-toolbar dark dense app color="blue-grey darken-2">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase">
<router-link :to="{ name: 'home' }" class="brand-logo white--text">
<span>Byte</span>
<span class="font-weight-light">[Gym]</span>
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
</v-btn>
</template>
<v-list>
<v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
<v-list-tile-title>{{ item.text }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-btn flat to="/nutrition">Nutrition</v-btn>
<v-btn flat to="/about">About</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-btn v-if="user" flat>{{user.email}}</v-btn>
<v-btn v-if="!user" icon to="/login">
<v-icon>account_circle</v-icon>
</v-btn>
<v-btn v-if="user" icon #click="logout">
<v-icon right>exit_to_app</v-icon>
</v-btn>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon class="hidden-sm-and-up">
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
I want it to look like the other buttons when they are active, but now its only a tiny box around it. I feels this should work out of the box?
Can't find an answer for this anywhere..
So the problem here is that you're putting a button inside of a button. If you remove the v-btn around Training then it works the way it's supposed to.
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon>Training
</v-btn>
</template>
Working codepen here: https://codepen.io/CodingDeer/pen/rNBjLOJ?editors=1010
I am trying to align button in my cards. I have a layout which contains 3 cards in a row. But, the problem is, when i add text in the card the position of the button changes in the specific card.
I have tried passing different props and tried using different classes. But it did not work for me
This is the code:
CardRenderer.vue:
<v-container grid-list-sm>
<v-layout wrap>
<v-flex xs12 sm4 v-for="(item, index) in renderData" v-bind:key="index">
<v-card hover height="100%" >
<v-img
class="white"
height="200px"
:src="item.icon"
>
<v-container >
<v-layout fill-height>
<v-flex xs12 align-end flexbox >
<!-- <span class="headline black--text">{{ item.name }}</span> -->
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<p class="headline black--text">{{ item.name }}</p>
<!-- <span class="grey--text">Number 10</span><br> -->
<!-- <span>Whitehaven Beach</span><br> -->
<span>{{ item.description }}</span>
</div>
</v-card-title>
<v-card-actions>
<!-- <v-btn flat color="orange">Share</v-btn> -->
<v-btn :href="'/dashboard/'+item.name" color="primary">More!</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
This is how my layout looks right now.. Look at the button. I want them to be aligned irrespective of the text provided in the card.
Thanks
You can add classes d-flex flex-column on your v-card and add <v-spacer></v-spacer> before the card actions.
<v-card class="d-flex flex-column">
<v-card-title>
...
</v-card-title>
<v-spacer></v-spacer>
<v-card-actions>
...
</v-card-actions>
</v-card>
Just add an outer class to the card:
<v-card hover height="100%" class="card-outter">
and add card-actions class to v-card-actions
<v-card-actions class="card-actions">
css :
.card-outter {
padding-bottom: 50px;
}
.card-actions {
position: absolute;
bottom: 0;
}
Live example on codesandbox:
https://codesandbox.io/s/vue-template-jsodz?fontsize=14
Add a margin to the bottom of your card, and then position the buttons absolutely from the bottom (with a bit of a margin too).
I know this is old, but I had the same issue. Turs out the absolute position is available through props so you don't have to use inline styling or classes.
<v-card-actions>
<v-btn
absolute
bottom
left
>More!</v-btn>
</v-card-actions>
However, this did mess up the position on my tooltips - fyi.
I had the same problem with only one dialog, so I don't need absolute positioning - just to keep the buttons at the bottom of the card.
'Stead of messing with styles and positioning and stuff, simply insert an extra <v-card-text></v-card-text>, and Vue automatically adds the padding needed to push the buttons down.
Not the best practice, but it's quick and works all right, specially when you're using Vue's automatic styling and don't want to start applying random css.
<v-dialog v-model="dlgShow" max-width="290">
<v-card min-height="220"> //this causes the problems
<v-card-title>Confirmation required</v-card-title>
<v-card-text>Are you sure you want to delete this?</v-card-text>
<v-card-text></v-card-text> //and here's the fix
<v-card-actions>
<v-spacer></v-spacer>
<v-btn #click="dlgShow = false">No, cancel</v-btn>
<v-btn color="primary" #click="myFunc">Yes, delete</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>