1

I create Vue application with a login form. In this form, after refreshing the page, the inputs are automatically completed ff they are remembered. But here is the problem because for example user password and the string input "Password" overlap and it looks bad:

enter image description here

After clicking on input it fixes itself:

enter image description here

Template:

<template>
  <v-form>
    <v-text-field
      type="password"
      v-model="form.password"
      label="Password"
      required
    ></v-text-field>
  </v-form>
</template>

Script:

<script>
export default {
  data: () => ({
    form: {
      password: "",
    },
  }),
  computed: {
    userData() {
      return {
        password: this.form.password,
      };
    },
  },
};
</script>

How to fix it?

Edit: I tried all the solutions from this question but it doesn't work for me, there is still a problem.

Weronika
  • 370
  • 1
  • 4
  • 16
  • 3
    This issue already got answered here: https://stackoverflow.com/questions/63264017/how-fix-issue-with-chrome-auto-complete-overlap-with-labels-in-vuetify – tho-masn Sep 06 '21 at 14:09
  • 2
    Does this answer your question? [How fix issue with chrome auto complete overlap with labels in vuetify?](https://stackoverflow.com/questions/63264017/how-fix-issue-with-chrome-auto-complete-overlap-with-labels-in-vuetify) – StevenSiebert Sep 06 '21 at 14:12
  • 1
    I tried all the solutions from this question but it doesn't work for me, there is still the problem – Weronika Sep 06 '21 at 14:20
  • 1
    Solutions from this question don't work because they are obsolete, the solution to my question is [this](https://stackoverflow.com/questions/60160260/vuetify-input-autocomplete-bug) – Weronika Sep 06 '21 at 14:58

0 Answers0