Vertically align elements in vuetify v-card component

user_2945859 0
Viewed 4252

I am displaying 3 card components in a layout of 3 v-cols inside of a v-row like this (All 3 elements are currently v-card-text elements):

<v-row>
  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>

  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>

  <v-col>
    <v-card>{{elements}}</v-card>
  </v-col>
</v-row>

Since the content of element 2 consist of dynamically added text of various lengths they are not always of the same length and therefore height, resulting in a situation like this:

enter image description here

What I would like to achieve instead is that each element is placed in the same position across all three columns, according to the largest one, so that element 3 is always in the same position:

enter image description here

vcf-vcard vuetify.js vertical-alignment
1 Answers

Both v-card and v-card-text elements should be styled with height: 100%. Using the Vuetify css helper classes (d-flex & flex-column), set the v-card-text to display: flex and flex-direction: column. At this point you can use the v-spacer element to move the third element to the bottom.

Example:

<v-row>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="full-height">
      <v-card-text class="full-height pa-2 d-flex flex-column">
        {{ element 1 }}
        {{ element 2 }}
        <v-spacer/>
        {{ element 3 }}
      </v-card-text>
    </v-card>
  </v-col>
</v-row>

<style scoped>
.full-height {
  height: 100%;
}
</style>

See SandBox for a working example

Edit vuetify-card-elements-placement

user_67764670
Related