Search code examples
vuejs3vuetifyjs3

v-text-field adding margin at bottom on runtime, when validation fails

```<v-text-field color="primary" class="hello" v-model="form.name" label="Name" placeholder="Name" variant="outlined" hide-details="auto" density="compact" :rules="[rules.required]">
</v-text-field>```

This adds margin at bottom on runtime, when validation fails... and removes it when validation passes... this give a bit of transition to form. Can we keep the mb consistent so it do not move up and down.. on validation pass or fail.

Solution

  • Remove hide-details="auto" should solve you issues.

    <v-text-field color="primary" class="hello" v-model="form.name" label="Name" placeholder="Name" variant="outlined"  density="compact" :rules="[rules.required]">
</v-text-field>