I am using v-text-filed and in that, I am using textarea. I want to change the default height of textarea and make it small. Is it possible to do this?
<v-text-field
name="input-1"
label="Label Text"
textarea
></v-text-field>
add rows property
<v-text-field
name="input-1"
label="Label Text"
textarea
rows="2"
></v-text-field>
If you want to use textarea, I think use <v-textarea> tag is better. The example code is:
<v-textarea
name="content"
hint="hint text"
rows="2"
></v-textarea>
you also follow this link to get more details
Related
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 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
Vuetify autocomplete by default have custom "up" and "down" arrow icons:
How can be changed this icon to search icon in other events (active or inactive) and get this view:
This example created using v-text-field:
Code:
<v-text-field
flat
solo
hide-details
append-icon="search"
label="Search..."
color="#000000"
></v-text-field>
I tired append icon to vuetify autocomplete component but can't remove default up and down rows.
Code:
<v-autocomplete
v-model="select"
:append-outer-icon="search ? 'search' : 'search'"
label="Search..."
type="text"
:loading="loading"
:items="items"
:search-input.sync="search"
cache-items
class=""
flat
hide-no-data
hide-details
#click:append-outer="startSearch"
></v-autocomplete>
Result:
Generaly how I can change arrow icons to search icon and do it as clickable for search?
Use append-icon="" and set it to blank
Here's the example.
If you want to append icon with callback function use append-icon-cb="()"
https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101
Try this append-icon="mdi-magnify"
So here is my password field in vuetify :
<v-text-field
label="Password"
v-model="password"
required
></v-text-field>
But when i enter text it's in clear and not *****
How to make a vuetify password textfield so when a user type it will show only ***** and not what the user is typing.
regards and thanks
Add the type="password" to your input component.
<v-text-field type="password"> </v-text-field>
You can check the Vuetify Documentation for password field properties.
<v-text-field type="password"></v-text-field>
I tried the accepted answer, but it did not work for me. Do not bind the type property. Use as a regular input password field.
Had the same problem as OP and got it to work by using the following (using Vuetify v2.1.0)
<v-text-field v-model="form.password" label="Password" type="password"></v-text-field>