How to bottom align button in card, irrespective of the text in vuetify?

Question

I am trying to align button in my cards. I have a layout which contains 3 cards in a row. But, the problem is, when i add text in the card the position of the button changes in the specific card.

I have tried passing different props and tried using different classes. But it did not work for me

This is the code:

CardRenderer.vue:

<v-container grid-list-sm>
    <v-layout wrap>

    <v-flex xs12 sm4 v-for="(item, index) in renderData" v-bind:key="index">

      <v-card hover height="100%" >
        <v-img
          class="white"
          height="200px"

          :src="item.icon"
        >
          <v-container >
            <v-layout fill-height>
              <v-flex xs12 align-end flexbox >
                <!-- <span class="headline black--text">{{ item.name }}</span> -->
              </v-flex>
            </v-layout>
          </v-container>
        </v-img>
        <v-card-title>
          <div>
            <p class="headline black--text">{{ item.name }}</p>
            <!-- <span class="grey--text">Number 10</span><br> -->
            <!-- <span>Whitehaven Beach</span><br> -->
            <span>{{ item.description }}</span>
          </div>
        </v-card-title>
        <v-card-actions>
          <!-- <v-btn flat color="orange">Share</v-btn> -->

          <v-btn  :href="'/dashboard/'+item.name" color="primary">More!</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex> 

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

This is how my layout looks right now.. Look at the button. I want them to be aligned irrespective of the text provided in the card.

Thanks

Solution 1

Just add an outer class to the card:

<v-card hover height="100%" class="card-outter">

and add card-actions class to v-card-actions

<v-card-actions class="card-actions">

css :

.card-outter {
  padding-bottom: 50px;
}
.card-actions {
  position: absolute;
  bottom: 0;
}

Live example on codesandbox: https://codesandbox.io/s/vue-template-jsodz?fontsize=14

Solution 2

You can add classes d-flex flex-column on your v-card and add <v-spacer></v-spacer> before the card actions.

      <v-card class="d-flex flex-column">
        <v-card-title>
          ...
        </v-card-title>
        <v-spacer></v-spacer>
        <v-card-actions>
          ...
        </v-card-actions>
      </v-card>

Solution 3

Add a margin to the bottom of your card, and then position the buttons absolutely from the bottom (with a bit of a margin too).