Vuetify password is overlaping v-text-field label

3
votes

I'm making a logging component with Vuetify and Firebase. I want the pasword to be hidden, but by adding the type 'pasword' to the v-text-field, it adds 4 points overlapping the label of the pasword field and the word 'admin' overlapping the email field:

enter image description here

When I click on any field, I can see in $data pre that "admin" is assigned to both pasword and email. I've tryed to set 'placeholder' and 'value' properties to empty strings, but doesn't works. In the vuetify docs I can't see any prop that asigns 'admin' to v-text-field. How can I solve this issue? Here is my component code:

<template>
  <v-form>
    <v-container>
      <v-text-field 
        label="E-mail"
        v-model="email"
        >
      </v-text-field>
      <v-text-field
        label="Pasword"
        v-model="password"
        type="password"
        placeholder=""
        >
      </v-text-field>
      <v-btn 
        color="blue" 
        @click="login()"
      >Submit
      </v-btn>
    </v-container>
    <pre>
    {{ $data}}
  </pre>
  </v-form>
</template>

<script>
  import firebase from 'firebase'
  export default {
    data() {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      login(){
        firebase.auth().signInWithEmailAndPassword(this.email, this.password)
          .then(user => console.log('User conected'), error => console.log(error))
      }
    }
  }
</script>
2
javascriptfirebasevue.jsvuetify.js

2 Answers

1
votes

I don't think this has anything to do with your code, you are using Chrome, right? Google does some weird stuff that are really difficult to control, this is because you have a saved username and password and as vuetify uses the label as a placeholder, google's saved forms styles 'crashes' with yours, it has happened to me with the row color of the dropdown of saved forms and right now (just in 1 computer) the font size of the username and password is smaller inside the v-text-field until you click it

1
votes

I found the bug discussion and workaround (from @185driver) here: https://github.com/vuetifyjs/vuetify/issues/3679 The suggested code did not work consistently for me

I am still looking for a better solution but in the interim I found that setting the labels as active at least stops the overlap. On forms that do not have data yet, the label is engaged before it should be, but the form looks better than with the overlapped text.

login_vue.js

mounted() {
    $("label\[for=\'username\'\]").addClass('v-label--active');
    $("label\[for=\'password\'\]").addClass('v-label--active');
    ...
}

login.html.erb

<v-row>
  <v-col cols="5"></v-col>
  <v-col cols="2">
    <v-text-field id="username" v-model="email" name="email" label="Username" ></v-text-field>
  </v-col>
</v-row>
    
<v-row>
  <v-col cols="5"></v-col>
  <v-col cols="2">
    <v-text-field id="password" v-model="password" :type="'password'" name="password" label="Password" ></v-text-field>
  </v-col>
</v-row>

Note: The inputs have to have ids in order for the label "for" to be generated as something other than input-1

Form without overlapping label