CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
alessmar
alessmar

Reputation: 4727

Vuetify.js - how to make cards on same row fill all available vertical space?

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: 3401

Answers (2)

Bj&#248;rn Nyborg
Bj&#248;rn Nyborg

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

Boussadjra Brahim
Boussadjra Brahim

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

Related Questions