How to make all v-card equal height with vuetify2
You just have to set 'align' property to "stretch" in v-row:
<template>
<div>
<v-row align="stretch" class="ma-2">
<v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
<Item :show-buttons="true" :item="i" />
</v-col>
</v-row>
</div>
</template>
I think you're looking for something like this:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
{ id: 1, name: 'A', description: 'Short', showButtons: true },
{ id: 2, name: 'B', description: 'Short', showButtons: false },
{ id: 3, name: 'C', description: 'Longer text that wraps onto multiple lines', showButtons: true }
]
}
}
})#app {
max-width: 500px;
}<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<div>
<v-row class="ma-2">
<v-col md="4" class="pa-3 d-flex flex-column" v-for="i in items" :key="i.id">
<v-card class="elevation-5 flex d-flex flex-column">
<v-card-title primary-title>
<h3 class="headline mb-0">{{ i.name }}</h3>
</v-card-title>
<v-card-text class="flex">
<div class="body-1">{{ i.description }}</div>
<v-divider light style="margin-top:15px;"></v-divider>
<v-divider light></v-divider>
</v-card-text>
<v-card-actions v-if="i.showButtons">
<v-btn color="green">
<a>VISIT</a>
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</v-app>
</div>I've added the classes d-flex, flex-column, and flex in a few places but otherwise it should be equivalent to the code posted in the question. The d-flex flex-column makes the parent a flex-box column and then flex sets the child to flex: auto, so that it stretches to fill the space. There's a subtlety here in that the available space is defined by the tallest item, so there's a circularity of sorts.
Set the height and the overflow in the text area:
<v-card-text style="overflow-y: auto; height:100px" >
<div class="body-1">{{ description }}</div>
<v-divider light style="margin-top:15px;" />
<v-divider light />
</v-card-text>
It is better to do it by a class, but I use style here for an easy grasp.
class="fill-height" on the cards works for me:
<v-row>
<v-col v-for="i in 8" :key="i" lg="4">
<v-card class="fill-height">...</v-card>
</v-col>
</v-row>