Vuetify v-text-field label on right - css

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.