I am trying to horizontally- and vertically align a text field within a parallax in Vuetify. Doing it with text works fine as seen here (Center text in Parallax) but doing it with a text field fails (Center Textfield in Parallax).
Code:
<template>
<v-app>
<v-main>
<v-parallax src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
<div class="d-flex flex-column fill-height justify-center align-center text-white">
<v-text-field label="Your email" clearable variant="solo" prepend-inner-icon="mdi-email-outline" min-width="350">
<template v-slot:append-inner>
<v-btn class="mt-n1" color="green">
Sign up
</v-btn>
</template>
</v-text-field>
</div>
</v-parallax>
</v-main>
</v-app>
Thanks!
Its because the text field has some flex rules on it already.
Add the flex helper class flex-grow-0 to the text field.
And add align-self-stretch to ensure the text field width changes.
To add some spacing either side, add mx-5 helper class.
<v-text-field class="flex-grow-0 align-self-stretch mx5" label="Your email" clearable variant="solo" prepend-inner-icon="mdi-email-outline" min-width="350">
Example: Link
Related
I'm fairly new to vuetify and was wondering if the append-icon prop of v-text-field can be dynamic based on the valid state of the field. I need 2 options:
Option 1:
If there is an error it can be the red alert icon. If its valid it can change to a green checkmark.
Option 2: Only show the error icon if there is an error else hide it.
<v-text-field
v-model="firstname"
:rules="nameRules"
class="text-field"
append-icon="mdi-alert-circle-outline"
placeholder="Enter first name"
hide-details="auto"
outlined
required
>
</v-text-field>
Check this codesanbox I made: https://codesandbox.io/s/stack-73601258-dynamic-prepend-icon-uq729h?file=/src/components/Example.vue
Vuetify components have a thing called slots that you can modify to extend it's functionality. You can find the available slots for each vuetify component at their API documentation page:
https://vuetifyjs.com/en/api/v-text-field/#slots
In this example I modified the icon append slot
<v-form v-model="validForm" ref="myForm" lazy-validation>
<v-card class="pa-5">
<v-text-field v-model="text" :rules="textRules" label="My text field">
<template v-slot:append>
<v-icon v-if="validForm && text.length > 0" color="green">
mdi-check
</v-icon>
<v-icon v-if="!validForm" color="red">
mdi-alert-circle-outline
</v-icon>
</template>
</v-text-field>
<v-btn :disabled="!validForm" color="primary" #click="submitForm">
Submit
</v-btn>
</v-card>
</v-form>
The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.
I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.
Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.
I tried wrapping v-app-bar with v-container:
This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.
Is there a native way to do this or will I need to get creative?
<template>
<v-container>
<v-app-bar
color="indigo accent-4"
dense
flat
dark
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</template>
Similar question but no answers. Problem with placing v-app-bar content in container?
Found a workaround in the interim, not sure how clean it is:
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
In case you want the v-app-bar to be fixed to the top of the page, I solved this by wrapping a v-app-bar inside a v-container inside another v-app-bar:
<template>
<v-app-bar app fixed dense color="grey lighten-4" elevation="1">
<v-container>
<v-app-bar dense elevation="0">
<v-app-bar-title nuxt href="/">
My Title
</v-app-bar-title>
</v-app-bar>
</v-container>
</v-app-bar>
</template>
As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...
<template>
<v-dialog :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For me this is work (Vuetify version 2)
Add scrollable prop in <v-dialog>
inside <v-card> use <v-card-title> instead of <v-toolbar>
then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element
<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:
.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}
You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.
In my case, fixed title was not working until I did not wrap my div in v-card-text
<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
PS. the Vuetify semantic is very important for correct working all of features (ex. using v-card-actions in v-card instead of custom div)
I'm trying add the "scroll off screen" behavior to a toolbar
Here's the code:
https://codepen.io/anon/pen/MrONGb
<div id="app">
<v-app id="inspire">
<v-content>
<v-toolbar
absolute
color="teal lighten-3"
dark
scroll-off-screen
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<div style="height:1500px"></div>
</v-content>
</v-app>
</div>
On the example page It says:
for this example there is special markup that will not be required in
your application.
But what exactly I don't need? How do I make this code work?
you need to add fixed and app props on v-toolbar component (remove absolute prop)
you should add on toolbar prop: scroll-threshold="1" scroll-off-screen="true"
VueJS markup:
<v-menu
lazy
:close-on-content-click="false"
v-model="modal"
transition="scale-transition"
offset-y
full-width
:nudge-right="40"
max-width="290px"
min-width="290px">
<v-text-field
slot="activator"
label="Issue Date"
v-model="date"
append-icon="event"
readonly
>
</v-text-field>
<v-date-picker v-model="date" no-title scrollable actions>
<template scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
HTML:
`<div class="menu__activator">
<div data-v-386ef34c="" class="input-group input-group--dirty input-group--append-icon input-group--text-field">
<label>Issue Date</label>
<div class="input-group__input">
<input readonly="readonly" tabindex="0" aria-label="Issue Date" type="text">
<i aria-hidden="true" class="material-icons icon input-group__append-icon input-group__icon-cb">event</i>
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
</div>`
How it appears in browser:
I'd like to write e2e to assert some logic with the calendar date. Date is produced with moment to match current day. However I cannot figure out how to access that text value with xpath.
Xpath to get the element:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]')
How the element appears in developer console:
With the attribute I need at the very bottom:
Xpaths I've tried which result in empty array:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]//#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]/#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly][0]//#value')
Edit:
Managed to get the value in chrome console:
$x('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]')[0].value
But still struggling with Nightwatch
Any solutions with xpath or css are welcome! Thanks!
Had to import chai, but this finally worked:
.getValue('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]', function(result) {
expect(result.value).to.equal('2017-10-17')
})