I have tried multiple combinations in Vuetify and get close but cannot do what I want. I am trying to achieve on the left side of the screen a select box with a send button on the right and then on the same row but right aligned two buttons. I want to center all four of these items (select box, send button, then the two buttons to the right). My code so far is as follows:
<v-container>
<v-row class="align-center">
<v-col class="text-left">
<v-row>
<v-select label="Send To"
color="primary"
outlined
dense
class="mx-2 ma-2 sendToSelect"></v-select>
<v-btn class="mx-2 ma-2"
color="primary"
outlined
##click="">
<v-icon>mdi-send</v-icon>
</v-btn>
</v-row>
</v-col>
<v-col class="text-right">
<v-btn class="mx-2"
color="primary"
class="ma-2"
outlined
##click="">
Finalize
<v-icon right
dark>
mdi-briefcase-check
</v-icon>
</v-btn>
<v-btn lass="mx-2"
color="primary"
class="ma-2"
outlined
##click="">
Edits Made
<v-icon right
dark>
mdi-lock-reset
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
Related
i have made a card for sign in and there are no colours on any of the created components. the bottom of card consitst of two button but even those colors are not visible. i have attached the template section of my code. even the blue color of text fields is not visible. what can be the possible error?
<template>
<div>
<v-container>
<v-layout wrap>
<v-row>
<v-col cols="5">
<v-img
src="https://image.freepik.com/free-vector/programmer-working-flat-style_52683-15041.jpg?w=740"
width="500"
height="400"
></v-img>
</v-col>
<v-col cols="7" align-self="end">
<v-flex sm12 md-8 offset-md3>
<v-card elevation="6" width="700">
<v-card-title>
<v-layout align-center justify-space-between>
<h3 class="headline">Sign In</h3>
</v-layout>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<p>Sign in with your username and password:</p>
<v-text-field
autofocus
label="Email"
v-model="email"
type="email"
></v-text-field>
<v-text-field
outline
hide-details
label="Password"
type="password"
v-model="password"
></v-text-field>
</v-card-text>
<br />
<v-divider></v-divider>
<v-container class="px-5" >
<v-checkbox
class="pl-1"
dense
label="Remember Me"
></v-checkbox>
</v-container>
<v-card-actions>
<v-btn class="green--text" color="info" flat to="/forgotdialogue">
Forgot password?
</v-btn>
<v-spacer></v-spacer>
<!-- <landingpage :username="username"></landingpage> -->
<v-btn #click="signUp" color="info">
<v-icon left>mdi-lock</v-icon>
Signup
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-col>
</v-row>
</v-layout>
</v-container>
</div>
</template>
Got it
i just had to change my App.vue file.
in App.vue I included the code in between v-app tags. After this all the colors were restored. Read about it here in this vuetify page https://vuetifyjs.com/en/components/application/
I'm trying to create a web site (I'm a beginer in Vuetify ) , and I want to create a button at the extremity of the page(last row even in the center ,last column) , but this buttun still in the begin of the page , Here is my code :
<template>
<div>
<v-toolbar
dark
prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Workers</v-toolbar-title>
</v-toolbar>
<v-row align="center">
<v-col cols="12" sm="6">
<v-btn x-large color="pink" >START</v-btn>
</v-col>
</v-row>
<v-navigation-drawer app
v-model="drawer"
.
.
.
</v-navigation-drawer>
</div>
</template>
PS: the collor of the button also doesn't change
Thank you !
I think this should do the trick.
<v-row class="align-center">
<v-col cols="12" sm="6" class="text-right">
<v-btn x-large color="pink" >START</v-btn>
</v-col>
</v-row>
When using v-row you can manipulate horizontal alignment using justify and vertical alignment using align like the official document points out.
For your case to align the button at the end:
<v-row justify="end">
<v-btn>Button</v-btn>
</v-row>
I am not able to have a button inside a text field
<v-text-field
outlined
label="Other items"
color="primary"
>
<template v-slot:append>
<v-btn
depressed
tile
color="white"
class="ma-0"
#click="deleteTypedItem(index)">
<v-icon color="grey">clear</v-icon>
</v-btn>
</template>
</v-text-field>
by the above code, I am getting like this
<v-text-field
outlined
label="Other items"
color="primary"
append-icon="mdi-close"
#click:append="deleteTypedItem(index)"
>
</v-text-field>
use Clearable
<v-text-field
outlined
label="Other items"
color="primary"
Clearable
#click:clear="clearCustomer"
>
</v-text-field>
Note: icon only visible text entered in field otherwise icon hidden
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
I have a list of label and vue-color (compact-picker) like this
Result 1
<v-list>
<v-list-tile
v-for="sport in filterSports(conso.sports)"
:key="sport.number"
#click="sportSelected(sport.number)"
:class="{'d-none': displaySport(sport)}">
<v-list-tile-action>
<v-dialog width="300">
<v-btn
flat
slot="activator"
color="grey">
<v-icon
:color="findIconColor(sport.number).color">lens
</v-icon>
</v-btn>
<v-card>
<v-card-title
class="subheading grey lighten-2"
primary-title>
Color picker
</v-card-title>
<v-card-text>
<compact-picker v-model="colors"
#input="setDepColor($event, sport.number)"></compact-picker>
</v-card-text>
<v-card-actions>
<v-layout
align-center
justify-end>
<v-btn #click="closeDialog">
<v-icon class="mr-1">done</v-icon>
</v-btn>
</v-layout>
</v-card-actions>
</v-card>
</v-dialog>
</v-list-tile-action>
<v-list-tile-content
:class="{ 'grey--text': isSelected(sport)}">
{{sport.label}}.
</v-list-tile-content>
</v-list-tile>
</v-list>
How can i close "this" dialog on click btn with #click=closeDialog ?
When i click outside the dialog, this dialog closes alone.
I tried with v-model, but when i click on icon for open dialog, vue open all dialogs instead...
You are probably using the same variable for all v-dialog and that's why they are all started at the same time.
You need on var for each
<v-dialog width="300" v-model="sport.show">
and then in on the close button
<v-btn #click="sport.show = false">