CODEWITHSUNDEEP
vue.jsbuttonvuetify.js
abhigyan nayak
abhigyan nayak

Reputation: 1444

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

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>

enter image description here

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

Upvotes: 27

Views: 40091

Answers (5)

Kamal Alhomsi
Kamal Alhomsi

Reputation: 671

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

Upvotes: 13

tacticalmovephase
tacticalmovephase

Reputation: 1253

I know this is old, but I had the same issue. Turs out the absolute position is available through props so you don't have to use inline styling or classes.

<v-card-actions>
   <v-btn
     absolute
     bottom
     left
   >More!</v-btn>
</v-card-actions>

However, this did mess up the position on my tooltips - fyi.

Upvotes: 1

half of a glazier
half of a glazier

Reputation: 2076

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>

Upvotes: 0

Thomasleveil
Thomasleveil

Reputation: 104195

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>

Upvotes: 55

xon52
xon52

Reputation: 736

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

enter image description here

Upvotes: 1

Related Questions