Vuetify buttons not vertically alligned

Question

I'm new to Vue and Vuetify. My question is about aligning buttons. I have a container that contains a couple of v-text-fields and v-combobox they are centered in the middle of the container.

Now I want to have three buttons below this form, but whatever I try to do they are not aligned vertically, every button appears lower than the others. How can I correct this such that they are nicely aligned on the top?

<template>
  <div class="ladder">
    <v-container fluid>
      <v-row justify="center">
        <v-col cols="12" sm="6">
          <v-text-field
            v-model="higher_price"
            :rules="[rules.required, rules.number]"
            label="Higher Price"
          ></v-text-field>
          <v-text-field
            v-model="lower_price"
            :rules="[rules.required, rules.number]"
            label="Lower Price"
          ></v-text-field>
        </v-col>
      </v-row>

      <v-row align="start">
        <v-spacer></v-spacer>
        <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
        </v-col>
        <v-col>
          <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
          </v-col>
        </v-col>
        <v-col>
          <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
          </v-col>
        </v-col>
        <v-spacer></v-spacer>
      </v-row>
    </v-container>
  </div>
</template>

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

aks44 aks44 · Accepted Answer · 2020-07-14T16:59:55

There are two v-col which are not valid in the template you created, removing those will solve your issue.. Try this..

<v-row align="start">
    <v-spacer></v-spacer>
    <v-col align="center" xs="4" >
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-col align="center" xs="4" >
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-col align="center" xs="4">
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-spacer></v-spacer>
  </v-row>

Vuetify buttons not vertically alligned

1 Answers