I want to create an input field for the site where a search can be done using the v-text-field and the result will be displayed in the v-menu component.
The problem is that when the screen height is insufficient, the v-menu component covers the input field like this-
But I want it to be like this-
Here is my code-
<v-text-field
:items="..."
v-model="..."
...
>
<v-menu activator="parent">
...
</v-menu>
</v-text-field>
Related
I want to use a phone icon (mdi-phone) as a prepend-inner in v-text-field.
I can write it like below and everything works fine:
<v-text-field
type="tel"
v-if="!numberIsEntered"
label="phone number"
clearable
required
color="#ff5b1b"
:rules="[
rules.required,
rules.internationalNumber,
rules.nationalNumber
]"
class="mt-10 mb-15"
v-model="userLoginDetails.userNumber"
outlined></v-text-field>
the icon in this code changes color with the input state changes. if there is an error and input changes color to red, the icon's color changes to red as well.
but I wanted the icon to be rotated so I added the below code in <v-text-field></v-text-field>:
<template v-slot:prepend-inner>
<v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
</template>
now the icon's color doesn't change with different input states (e.g: error,...).
is this a bug or there is way to fix it?
EDIT: This issue is being caused by vuetify overriding icon styles with dark theme properties. I rewrote the code as following:
<template v-slot:prepend-inner>
<i aria-hidden="true" class="v-icon notranslate mdi mdi-phone"
style="transform: rotateY(-180deg);"></i>
</template>
Try to pass the icon name as prop in order to take the same color of the input, then define a style rule to rotate the icon :
<v-text-field
type="tel"
class="phone-input"
prepend-inner-icon="mdi-phone"
...
outlined></v-text-field>
style :
.phone-input .v-icon{
transform:rotateY(-180deg)
}
LIVE DEMO
i am using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27
I am using vuetify
and I just wanna add an icon over the button of v-switch,
I searched in slots and found nothing
<v-switch label="Dark mode" flat inset></v-switch>
I wanna do like this picture
You can use v-checkbox, with off-icon and on-icon.
As example:
<v-checkbox class="pt-3"
v-model="$vuetify.theme.dark"
color="purple"
off-icon="mdi-theme-light-dark"
on-icon="mdi-theme-light-dark"
></v-checkbox>
Reference at https://vuetifyjs.com/en/api/v-checkbox/#props
far you can do is append-icon and/or prepend-icon props
you can check the detail at https://vuetifyjs.com/en/api/v-switch/#props
I have a strange display problem on an input field using vuetify (image below).
Do you have an idea on the root cause and how to avoid this?
Here is the way I use it:
<v-form>
<v-text-field
v-for="p in visibleParameters"
:key="p.id"
:label="p.title ? p.title : p.name"
:placeholder="placeholder(p.data_type)"
v-model="valuesModel.params[p.name]"
outlined="true">
</v-text-field>
</v-form>
I am using Vuetify v-card-text inputs for my login page and the autocomplete displays the value on top of the label, which creates this annoying glitch. When I click on the inputs the labels clear out.
How do I get rid of label if the autocomplete is on?
<v-text-field
:rules="emailRules"
autocomplete
label="Email"
v-model="login.mail"
></v-text-field>
<v-text-field
:rules="passwordRules"
autocomplete
label="Password"
type="password"
v-model="login.password"
v-on:keypress.enter="submit()"
></v-text-field>
I don't think v-text-field has autocomplete props. Here