CODEWITHSUNDEEP
webvue.jsvuetify.js
DevonteZ STL
DevonteZ STL

Reputation: 133

How do i change position of a button depending on size of screen in Vuetify

I am looking for a way to change the position of a button depending on what size the screen using Vuetify, the button should be at the bottom right.

this is the position of the button on a large screen

This is the position on a smaller screen

Upvotes: 5

Views: 2429

Answers (2)

Jeremy Walters
Jeremy Walters

Reputation: 2152

Like the first answer said you have to use breakpoint. Here is an example. 

<v-flex xs12 md6 class="text-xs-right">
    <v-btn :block="$vuetify.breakpoint.xsOnly" flat>Cancel</v-btn>
    <v-btn :block="$vuetify.breakpoint.xsOnly" color="primary" @click="onSave()">Save</v-btn>
</v-flex>

Upvotes: 8

FosterZ
FosterZ

Reputation: 3911

you can use "Breakpoint" this will allow you to apply specific properties based upon your viewport size.

export default {  
  computed: {
    position () {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs': return 'your position'
        case 'sm': return 'your position'
        case 'md': return 'your position'
        case 'lg': return 'your position'
        case 'xl': return 'your position'
      }
    }
  }
}

Upvotes: 1

Related Questions