CODEWITHSUNDEEP
vue.jsnuxt.jsvuetify.js
oscar melin
oscar melin

Reputation: 31

Trouble aligning content inside v-row or v-col in Vuetify.js

I am having issues aligning things correctly inside my Vue app using Vuetify.

<v-card class="mx-auto">
  <v-row>
    <v-col
      v-for="(item, i) in items"
      :key="i"
      align-end
      justify-end
    >
      <v-btn class="btn">
        <v-icon>{{ item.icon }}</v-icon>
        <span class="ml-2">{{ item.text }}</span>
      </v-btn>
    </v-col>
  </v-row>
  ...

I simply want to align it to the right.

Upvotes: 0

Views: 4868

Answers (2)

floodlitworld
floodlitworld

Reputation: 626

The properties you've put on <v-col> don't exist (i.e. align-end and justify-end). They are properties on the <v-row> component (which is a flex container). You need to use classes instead.

Make sure to consult the API->props section on the Vuetify component page when choosing component properties.

Try

<v-col class="d-flex justify-end">
    <v-btn>Button</v-btn>
</v-col>

Note that the alignment is dependent upon the width of v-col. If v-col is only as wide as the button, you'll need to set the width by using the cols="x" property.

Upvotes: 2

Mohsen
Mohsen

Reputation: 4235

Add direction: rtl to your v-btn, Here is codepen:

<template>
  <v-btn class="btn rtl">
  ...
  </v-btn>
</template>

<style>
.rtl { direction: rtl; }
</style>

Upvotes: 0

Related Questions