CODEWITHSUNDEEP
vue.jsvuetify.js
mkrisch76
mkrisch76

Reputation: 63

Vue SPA Vuetify v-text-field outlined field labels not positioning correctly

Would anyone know how to fix label positioning for Vuetify outlined text fields. Here's a simple example. On focus, the label doesn't position themselves correctly.

<div id="js-nomination-form">
<v-form v-model="valid">    
        <v-row>
                <v-col cols="6">
                        <v-text-field
                            outlined
                            v-model="companyname"
                            label="Company name"
                          ></v-text-field>
                    </v-col>
          <v-col cols="6">
              <v-text-field
                v-model="companyaddress"
                label="Address"
                outlined
                    ></v-text-field>
                </v-col>
        </v-row>
</v-form>
</div> 
new Vue({
  el: '#js-nomination-form',
  vuetify: new Vuetify(),
  data: () => ({
    valid: false,
    companyname: '',
    companyaddress: '',
  }),
  methods: {
    submit () {

    },
    clear () {
      
    }
  }
})

https://codepen.io/mkrisch76/pen/YzPbrpy

Upvotes: 1

Views: 778

Answers (1)

Lana
Lana

Reputation: 1267

Wrap v-form with v-app like this:

<div id="js-nomination-form">
  <v-app>
    <v-form v-model="valid">    
      <v-row>
        <v-col cols="6">
          <v-text-field
            outlined
            v-model="companyname"
            label="Company name"
          ></v-text-field>
        </v-col>
        <v-col cols="6">
          <v-text-field
            v-model="companyaddress"
            label="Address"
            outlined
          ></v-text-field>
        </v-col>
      </v-row>
    </v-form>
  </v-app>
</div>

But it's easy solution, just to see changes in your CodePen example. It's better to use v-app in your main template (usually App.vue) like this:

<!-- App.vue -->

<template>
    <v-app id="app">
        <router-view/>
    </v-app>
</template>
...

v-app should only be used within your application ONCE. Read more about v-app

Upvotes: 4

Related Questions