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

Answer 1

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>

Answer 2

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 {
  position: relative;
  padding-bottom: 50px;
}
.card-actions {
  position: absolute;
  bottom: 0;
}

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

Answer 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).

Answer 4

I had the same problem with only one dialog, so I don't need absolute positioning - just to keep the buttons at the bottom of the card.

'Stead of messing with styles and positioning and stuff, simply insert an extra <v-card-text></v-card-text> , and Vue automatically adds the padding needed to push the buttons down.

Not the best practice, but it's quick and works all right, specially when you're using Vue's automatic styling and don't want to start applying random css.

            <v-dialog v-model="dlgShow" max-width="290">
                <v-card min-height="220">  //this causes the problems
                    <v-card-title>Confirmation required</v-card-title>
                    <v-card-text>Are you sure you want to delete this?</v-card-text>
                    <v-card-text></v-card-text>  //and here's the fix
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn @click="dlgShow = false">No, cancel</v-btn>
                        <v-btn color="primary" @click="myFunc">Yes, delete</v-btn>
                        <v-spacer></v-spacer>
                    </v-card-actions>
                </v-card>
            </v-dialog>