[Vuejs]-Vuetify switch/checkbox label displaying wrong

by

0👍

✅

Solved it with this easy-CSS trick!

<style>
 .v-input__control label {
 top: 0px;
 }
</style>

0👍

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/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@0.14.8/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.

Leave a comment