Vuetify v-text-field label on right

Question

The label of the v-input-text is on the right. I would like to put it on the left without using css, which should actually be the default. From the documentation I can see that the left side is the default one. I have already tried several examples of the Vuetify documentation and all of them give me the same result.

The code is copied/pasted from the docs. It seems to me that something so simple should not be an issue. I have struggled with this for awhile now. I have already tried to run several examples in different browsers: Opera, Microsoft Edge, Firefox.

Here is the code that you can find here:

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="message"
            outlined
            clearable
            label="Message"
            type="text"
          >
            <template v-slot:prepend>
              <v-tooltip
                bottom
              >
                <template v-slot:activator="{ on }">
                  <v-icon v-on="on">
                    mdi-help-circle-outline
                  </v-icon>
                </template>
                I'm a tooltip
              </v-tooltip>
            </template>
            <template v-slot:append>
              <v-fade-transition leave-absolute>
                <v-progress-circular
                  v-if="loading"
                  size="24"
                  color="info"
                  indeterminate
                ></v-progress-circular>
                <img
                  v-else
                  width="24"
                  height="24"
                  src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
                  alt=""
                >
              </v-fade-transition>
            </template>
            <template v-slot:append-outer>
              <v-menu
                style="top: -12px"
                offset-y
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-icon left>
                      mdi-menu
                    </v-icon>
                    Menu
                  </v-btn>
                </template>
                <v-card>
                  <v-card-text class="pa-6">
                    <v-btn
                      large
                      flat
                      color="primary"
                      @click="clickMe"
                    >
                      <v-icon left>
                        mdi-target
                      </v-icon>Click me
                    </v-btn>
                  </v-card-text>
                </v-card>
              </v-menu>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

Result:

Answer 1

I had the same issue. In comparing my code to the code pen example on https://codepen.io/pen/?&editors=101 I noticed that they construct the vuetify object slightly differently.

I had:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = {}
export default new Vuetify(opts)

document.addEventListener('DOMContentLoaded', () => {
    Vue.use(Vuetify);

    login_vue = new Vue({
        el: '#login-vue',
       
        data: {
            message: "Hello World",
        },
        computed: {},
        methods: {}
    });
});

Their vue code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

This led me to think that their code was expecting a variable named 'vuetify'. After checking the installation guide again. https://vuetifyjs.com/en/getting-started/installation/#webpack-install. I saw that they have two ways to load vuetify depending on if you are loading from a loader or from javascript. I was using the Loader example in javascript.

Once I changed my code to create the variable they were expecting everything worked as expected.

Final Code:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = {}
export default new Vuetify(opts)

document.addEventListener('DOMContentLoaded', () => {
    Vue.use(Vuetify);
    vuetify: new Vuetify(),
    login_vue = new Vue({
        el: '#login-vue',
        data: {
            message: "Hello World",
        },
        computed: {},
        methods: {}
    });

});

Seems odd that I would need Vue.use(Vuetify); and vuetify: new Vuetify() This solution is working, but maybe someome with more VUE experience can give a better configuration.

Answer 2

I am using Vue2. The issues seems to be lying in the fact that my application has been made outside the v-app DOM. In order for everything to function correctly, it should be a descendant of . Hence, the issue. Once I put everything inside v-app, things started working like they should. However, refactoring the code could be days of work, depending upon size and complexity.

CSS Workaround

I have found a CSS workaround to solve the issue. I added the following styles to my App.vue and it seemed to fix the issue:

.v-input .v-label--active{
  transform: translateX(-12%) translateX(-7.5px) translateY(-28px) scale(0.75) !important;

}

.v-input--dense .v-label--active{
  transform: translateX(-12%) translateX(-7.5px) translateY(-21px) scale(0.75) !important;

}

---

My Problem

For me, the active labels were shifted slightly to the right and slightly to the bottom:

Suggestion

Since your issue is more extreme, try making the values in translateX more negative.

Caution

Remember - keep the ratio of the translateX values constant while doing so (12:7.5). This will ensure that there is no disparity due to the length of the labels.