vuetify v-switch label on two lines

Question

For some reason whatever I do the label here refuses to be on one line, here is my code:

 <v-container class="px-3">
    <v-layout justify-center>
      <v-flex xs12 sm10>
       <v-layout align-center justify-start>
         <v-flex lg3>
             <v-switch v-model="displayAllUsers"
                        @click.native.stop
                        color="primary"
                        :label="'All users'"
                        @change="toggleAllUsers()"
                        ></v-switch>

            </v-flex>
         </v-layout>
      </v-flex>
    </v-layout>
 </v-container>

Also attached is a pic of what it looks like.

Vuetify 1.5.14, using SVG Icons which might be related to this

harshit pandey harshit pandey · Accepted Answer · 2019-08-14T07:09:52

It is working fine for me here.

Maybe It's because there is something in that container that is causing this issue.

Can you provide more information about what's else is there in that container?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      displayAllUsers: true
    }
  },
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.css" rel="stylesheet"/>

<div id="app">
  <v-app>
      <v-flex lg3>
        <v-switch 
          v-model="displayAllUsers"             
          @click.native.stop
          color="primary"
          :label="'All users'"                  
          @change="displayAllUsers= false"
         ></v-switch>
      </v-flex>
  </v-app>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.7/vuetify.js"></script>

vuetify v-switch label on two lines

2 Answers