[Vuejs]-Vue.js 2.0 (Vuetify) align v-switch and v-button on the right of an element

by

0👍

✅

You’ve put the elements in a grid column, <v-col> which is going to align them vertically by default. You can simply remove the column element and they’ll be aligned horizontally as children of <v-row>. To align them neatly on the right-hand side of the card, you can use flex based <v-row> props like align="center" justify="end".

<v-card-subtitle>
  <v-row align="center" justify="end">
    <v-switch
      class="ma-0 pa-0"
      v-model="ex11"
      label="Finished"
      color="info"
      hide-details
    >
    </v-switch>

    Reload
    <v-btn icon color="primary">
      <v-icon>mdi-reload </v-icon>
    </v-btn>
  </v-row>
</v-card-subtitle>

codepen example.

Leave a comment