I have 2 button component and i want them to be in one single row
code :
<template v-slot:[`item.action`]="{ item }">
<v-btn depressed #click="view(item.book)" color="primary">View</v-btn>
<v-btn depressed #click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn>
</template>
So how to make them into one single row?
You can use CSS flex-box features:
.flex {
display: flex;
}
<div class="flex">
<button>Button 1</button>
<button> Button 2</button>
</div>
i figure it out and here is the code :
<template v-slot:[`item.action`]="{ item }" >
<v-container grid-list-sm>
<v-layout row justify-space-around>
<v-flex md3>
<v-btn depressed #click="view(item.book)" color="primary">View</v-btn>
</v-flex>
<v-flex md3>
<v-btn depressed #click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn>
</v-flex>
</v-layout>
</v-container>
</template>
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 am making a form in a dialog. I am trying to get a v-text-field occupy the full width of the container. But it is not occupying the full width.
I tried giving xs12 to lg12. I tried the directive full-width.
Here s my code:
<v-dialog v-model="dialog" max-width="878px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">
<span id="two">
<img id="plus" src="../assets/plus-symbol.svg">
<span id="addapp">Add Application</span>
</span>
</v-btn>
</template>
<v-card style="border-radius:20px 20px 0 0;">
<v-card-title>
<span class="headline" id="frmttl">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container fluid grid-list-md>
<v-layout row wrap style="margin-left:-600px; height: 314px; width:878px;">
<v-flex xs12 sm12 md12 lg12 xl12 >
<v-text-field v-model="editedItem.ApplicationName" single-line outline full-width placeholder="New Application Name"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions id="crdactns">
<v-spacer></v-spacer>
<v-btn id="closbtn" flat #click="close">Close</v-btn>
<v-btn id="savebtn" flat #click="save">{{ CreateOrSave }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
I expect the v-text-box to occupy the full width of the dialog. But actually it is only occupying about half the space on the left side.
Codepen : https://codepen.io/anon/pen/dLoNeO
remove "margin-left:-600px; height: 314px; width:878px; lines. will work fine. checked and working
My v-flex it is not respecting my orders and only half of element it was rendered. see the print:
Print from my view
Here is my script:
<v-card-title primary-title>
<div>
<p class="subheading grey--text">My title</p>
<h3 class="headline my-4">my sub title</h3>
<div>
<v-container fluid>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
<v-layout row wrap :class="`pa-2 ticket ${ticket.status.id}`">
<v-flex xs3>
<div class="caption grey--text">#ID</div>
<div>{{ticket.id}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Assunto</div>
<div>{{ticket.subject}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Criado em</div>
<div>{{ticket.created_on}}</div>
</v-flex>
<v-flex xs3>
<div class="right">
<v-chip
small
:class="`${ticket.status.id} white--text caption my-2`"
>{{ticket.status.name}}</v-chip>
</div>
</v-flex>
</v-layout>
</v-card>
</v-container>
</div>
</div>
</v-card-title>
Someone has any ideas?
Tks.
You can add a full width flex box above the v-card on line 7:
<v-flex xs12>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
...
EDIT: My mistake... after taking another look you can change the div on line 2 to a v-flex, which will give you the results like in this codepen: https://codepen.io/retrograde/pen/ZNYJRq?editors=0001 Note that I removed the code added by my original answer.
https://codepen.io/Adellii/pen/VBEQbo?&editors=101
The current code moves the buttons to the bottom when user clicks on yes in the radio button.How do I get the buttons fixed in the bottom?
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card height="280">
<v-radio-group v-model="content">
<v-radio label="Yes" value="yes" name="yes"></v-radio>
<v-radio label="No" value="no" name="no"></v-radio>
</v-radio-group>
<div class="x" v-show="content === 'yes'">
<v-text-field label="Regular" placeholder="Placeholder"></v-text-field>
<v-text-field label="Regular" placeholder="Placeholder"></v-text-field>
</div>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Apparently there are no v-card component props to achieve this.
So just add some css:
.flexcard {
display: flex;
flex-direction: column;
}
<v-card class="flexcard">
Codepen
Note that this works in your provided example for placing buttons at the bottom. In case your CSS is different in your project I'm not sure what you would like to do with other elements inside card. So you might need to add something like <v-spacer></v-spacer> or class="grow" or class="shrink" to some elements inside v-card to fit your style.
Example with bigger v-card height
I can currentl toggle the display of a paragraph on mouseover event , but how to come back to the initial paragraph when mousehover ends.. ?
HTML
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm>
<v-layout row wrap justify-space-around>
<v-flex d-flex xs12 sm3 md3>
<v-card class="flexcard" color="white" tile flat>
<v-card-title class="layout justify-center">
<div class="headline mt-1 mb-1 display-1 text-xs-center">MEMBERSHIP FEES</div>
</v-card-title>
<v-card-text class="grow">
<v-layout row justify-space-between align-baseline>
<v-flex xs2>
<v-btn v-on:mouseover="toggleInfo" dark small round color="green">2018</v-btn>
</v-flex>
<v-flex xs9 style="text-align: left;">
<p v-if="!displayInfo">PAID</p>
<p v-else>10.00$ - February, 22nd - Bank Transfer</p>
</v-flex>
</v-layout>
</v-card>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
JS SCRIPT
new Vue({
el: '#app',
data () {
return {
displayInfo: false
}
},
methods: {
toggleInfo () {
this.displayInfo = !this.displayInfo
}
}
})
see pen.io test
You are toggling the displayInfo on mouseover, now you will also have to toggle it on mouseleave.
<v-btn v-on:mouseover="toggleInfo" v-on:mouseleave="toggleInfo" dark small round color="green">2018</v-btn>