I want to add a tooltip over the info icon. I am not able to figure out how can I do that. Help me out.
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field required
label='Information'
v-model='demo.information'
:rules='nameRule'
append-icon="info">
</v-text-field>
</v-flex>
Update
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field required label='Information' v-model='demo.information' :rules='nameRule'>
<template slot="append-outer">
<v-tooltip right>
<template v-slot:activator="{on}">
<v-icon v-on="on">place</v-icon>
</template>
<span>tooltip!</span>
</v-tooltip>
</template>
</v-text-field>
</v-flex>
Since append-outer-slot does not exist yet in Vuetify 1.0.5, you'll need to use CSS/Vuetify's flex utility classes to place the icon afterward.
<v-flex xs12 md6 class="add-col-padding-right">
<div class="input-container d-flex align-center">
<v-text-field required label='Information' v-model='demo.information' :rules='nameRule'></v-text-field>
<v-tooltip right>
<v-icon slot="activator">info</v-icon>
<span>{{demo.information}}</span>
</v-tooltip>
</div>
</v-flex>
Here's a working example: https://codepen.io/Qumez/pen/WNvNgJP
Related
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 a problem with the code shown below. I want it to be fixed, therefore filling the height and the width, eliminating the scrollbar if possible.
Here is code sample:
<template>
<div class="mt-10 pt-10">
<v-container fluid ma-0 pa-0 fill-height>
<v-layout row wrap class="ma-0 pa-0">
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card height="900" class="ma-0 pa-0" id="rounded-card">
<v-img
src="img.jpg"
height="100%"/>
</v-card>
</v-flex>
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card class="ma-0 pa-0 elevation-5" height="900">
<item_att/>
<v-divider/>
<item_pro/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I want my website to have similar layout to this page: https://nephos.cssninja.io/product.html
Here's my sample page: https://thestackoverflow.netlify.com/single
I am having issue with Vuetify list inside dialog. My goal is to have available header/footer and inside it have a scrollable list with all this content having max of 600px height but being adjusted on smaller screens.
Right now, I have issue where it is working correctly for bigger screens height > 600px (I can scroll list + I see buttons at the bottom) but work incorrectly on smaller screens (can scroll list but have to scroll at the end to see buttons).
Do anyone have an idea what did I forget to add?
<!-- MovementsInput component -->
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation>
<v-card
>
<v-card-title class="headline primary">
Add new movement
</v-card-title>
<v-card-text>
<v-list
style="max-height: 600px"
class="scroll-y">
<template
v-for="movement in movements">
<v-list-tile
:key="movement.name">
<v-list-tile-title>
{{movement.name}}
</v-list-tile-title>
</v-list-tile>
</template>
</v-list>
<!-- Ignore this autocomplete, forget to remove it from screenshot -->
<v-autocomplete
v-model="movement"
:items="movements"
:color=this.$vuetify.theme.secondary
hide-selected
item-text="name"
item-value="name"
label="Movement"
placeholder="Select movement from the list"
return-object
></v-autocomplete>
</v-card-text>
<v-card-actions>
<v-btn
color="grey"
#click="cancelClicked"
>
Cancel
<v-icon right>fa-undo</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn
:disabled="!valid"
:rules="[v => !!v || 'Everything has to be valid']"
required
color="primary"
#click="confirmClicked"
>
Confirm
<v-icon right>fa-check</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-form>
</template>
<!-- Other file, all this is for now called in simple Vuetify dialog -->
<v-dialog
persistent
:value="true"
>
<MovementsSelect />
</v-dialog>
So, I did find solution, here is full example from Vuetify documentation.
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal first name*" required></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Email*" required></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Password*" type="password" required></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
label="Interests"
multiple
></v-autocomplete>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat #click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
Try adding v-app in your MovementsInput component.
Your component should be like this:
<template>
<v-app>
<!-- your component code here -->
</v-app>
</template>
More info here : https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct
I have been playing with vuetify, I've been trying to mimic a specific layout to see if I can do it and add tabs. So far, I've been able to center stuff but in a way that I view as weird. I want the h1 to be under the avatar.
I used v-spacer to center things and added tabs that are centered at the bottom
when I use v-slot it aligns everything in the middle.
If it's just the avatar it's perfect.
When I add an h1 under it does not go directly under.
I've been looking at the api and can't figure out.
Here's a link to the codepen https://codepen.io/sanwil9/pen/mYQaRx
<div id="app">
<v-app id="inspire">
<v-app-bar prominent extended
src="https://images3.alphacoders.com/114/114869.jpg"
dark
>
<v-spacer></v-spacer>
<v-avatar
size="90"
>
<img
src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&v=beta&t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
alt="Avatar"
/>
</v-avatar>
<h1>Super Steve</h1>
<v-spacer></v-spacer>
<template v-slot:extension>
</template>
<template v-slot:extension>
<v-tabs centered>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-content>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
<v-card dark color="primary">
<v-card-text class="px-0">12</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 2" :key="`6${i}`" xs6>
<v-card dark color="secondary">
<v-card-text class="px-0">6</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 3" :key="`4${i}`" xs4>
<v-card dark color="primary">
<v-card-text class="px-0">4</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 4" :key="`3${i}`" xs3>
<v-card dark color="secondary">
<v-card-text class="px-0">3</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 6" :key="`2${i}`" xs2>
<v-card dark color="primary">
<v-card-text class="px-0">2</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 12" :key="`1${i}`" xs1>
<v-card dark color="secondary">
<v-card-text class="px-0">1</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Help me align the h1 under the gravatar. I want it to be aligned.
Within the <v-app-bar> you can include the following:
<v-container>
<v-layout row>
a spacer, the avatar, and another spacer
</v-layout>
<v-layout row>
a spacer, the <h1>, and another spacer
</v-layout>
</v-container>
the template for the extension
This will insert a grid which will allow you to turn the single container of default content into two separate rows.
I want the textbox to be 6 column on screen greater than sm and 12 column for mobile.
I use the vuetify grid but it does not work as expected.
this is my code:
<v-card-text>
<v-layout warp>
<v-flex xs12 sm6 class="pa-1">
<v-text-field
ref="name"
v-model="password.name"
label="Name"
solo
placeholder="Full Name"
counter="25"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-1">
<v-combobox
v-model="password.keys"
label="Add keys"
chips
solo
multiple
>
<template slot="selection" slot-scope="data">
<v-chip :selected="data.selected" close #input="remove(data.item)">
<strong>{{ data.item}}</strong>
</v-chip>
</template>
</v-combobox>
</v-flex>
</v-layout>
In the mobile view, the elements are in the same row.
What can be the reason, and how can I fix it?
This is the mobile version:
You have a typo on the "v-layout" should be wrap not warp.
https://codesandbox.io/s/my49o8vo9y