'Vuetify switch/checkbox label displaying wrong

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?

1

vue.jsvuetify.js


Solution 1:[1]

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.

Solution 2:[2]

Solved it with this easy-CSS trick!

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rohìt Jíndal
Solution 2 alperen.emeksiz

Related Questions