I'm trying to add a v-switch to my web app. But it displays wrong (label should be next to v-switch, but as you can see from the picture)
Any ideas on how to fix this?
CodePudding user response:
I am not sure about your source code but ideally it should work. Here is the Demo :
Vue.use(Vuetify);
new Vue({
el: '#app',
data () {
return {
switch1: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-switch
v-model="switch1"
label="Test Switch Label"
></v-switch>
</v-container>
</v-app>
</div>
Please let me know what challenge you are facing as per above code snippet.
CodePudding user response:
Solved it with this easy-CSS trick!
<style>
.v-input__control label {
top: 0px;
}
</style>