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>
Related
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>
I have been trying to add image inside v-text-field, but it is causing an issue when I add it moves label to a bit of right side?
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
disabled
color="black"
:rule="[requiredRule]"
:label="$t('10')"
>
<template #prepend-inner>
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"> </v-img>
</template>
</v-text-field>
as you can see label PHONE moves to right side it isn't staying on its place, I tried to add margin-top but didn't fix it.
This looks like an undocumented feature, which explains why the behaviour may be unexpected.
The cause of the seems to me is that the input calculates the width of the slot content at the time of rendering, which due to a race condition may resolve before or after the image is rendered. That's why if you render multiple times, you may not always see it behaving this way.
To get around it, I thing you should be able to wrap the image with another element of fixed width. (<div style="width:30px">)
<v-text-field
ref="phone"
v-model="phone"
dense
outlined
label="My Label"
>
<template #prepend-inner>
<div style="width:30px">
<v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"/>
</div>
</template>
</v-text-field>
I'm just learning Vue.js & Vuetify and I can't change the size of my icon. Can anyone help me, please?
<v-text-field
prepend-inner-icon="mdi-magnify"
>
</v-text-field>
You can put anything you want in that "prepend-inner" emplacement by using slot ( it's an advanced feature in vue)
<v-text-field label="Prepend inner">
<template v-slot:prepend-inner>
<v-icon x-large>mdi-magnify</v-icon>
</template>
</v-text-field>
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've developed a modular popup form using Vuetify, but when i click the email input field and deselect to cause an "empty" error, and then switch over to the register tab, it then causes a "empty" error to the name field.
It seems the issue is linked to the ordering of the text field, because if i then cause the error for my password text field (2nd position for login form), then switch to the register form, the second input field prompts an error.
example in link
js fiddle code
I think the v-if for the selectedTab is triggering a change-notification, so the 2nd form validates (although I don't know why it's only the first 2 fields). Instead, use v-show...
<v-card-text v-show="selectedTab == 2">
<v-container>
<v-form ref="registerForm" v-model="valid" lazy-validation>
...
</v-form>
</v-container>
</v-card-text>
<v-card-text v-show="selectedTab == 1">
<v-container>
<v-form ref="loginForm" v-model="valid" lazy-validation>
...
</v-form>
</v-container>
</v-card-text>
https://codeply.com/p/9NtOj5QrPe