Reputation: 4727
I have three cards on the same row but one is bigger than the others, I would like to stretch the smaller one to fill all the available vertical space, I tried with align="stretch"
on v-row
but it's not working. Here is my pen
<v-container>
<v-row dense align="stretch">
<v-col cols="4">
<v-card>
<v-card-text class="green--text">
<h5 class="text-truncate text-uppercase">Sales</h5>
<h1>{{ sales }}</h1>
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card>
<v-card-text class="primary--text">
<h5 class="text-truncate text-uppercase">Balance</h5>
<h1>{{ balance }}</h1>
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card>
<v-card-text>
<v-form>
<v-select :items="items" label="Add Amount" outlined>
<template slot="item" slot-scope="data">
{{ data.item.value | numberFmt }}
</template>
</v-select>
<v-btn color="primary">OK</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
Upvotes: 0
Views: 3398
Reputation: 993
Simply add min-height: 100%;
styling for the cards. :)
I have edited your example here: https://codepen.io/bj-rn-nyborg/pen/oNzNyRy
Upvotes: 3
Reputation: 1
There's no prop in v-row
or v-col
that controls the height of child components, so you should control the height of every card by using the min-height
props with "100%"
as value :
<v-card min-height="100%">
...
Upvotes: 1