Comment rendre toutes les cartes virtuelles à hauteur égale avec vuetify 2

Question

Devenant fou avec cela, je veux égaliser toutes les v-cartes dans un projet vuetify2. Mon centre (v-card-text) a un nombre différent de caractères (texte). Testé avec une hauteur fixe de v-card-text, mais pas de barre de défilement comme prévu si le texte est plus long.

C'est le balisage pour un composant de v-card:

 <template>
  <v-card class="elevation-5" fill-height>
    <v-card-title primary-title>
      <h3 class="headline mb-0">{{ name }}</h3>
    </v-card-title>

    <v-card-text>
      <div class="body-1">{{ description }}</div>
      <v-divider light style="margin-top:15px;" />
      <v-divider light />
    </v-card-text>

    <v-card-actions v-if="showButtons">
      <v-btn color="green">
        <a :href="url">VISIT</a>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

Ceci est le composant parent:

<template>
  <div>
    <v-row 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>

Le parent est placé dans:

     <v-content>
      <v-container fluid ma-0 pa-0>
        <router-view />
      </v-container>
    </v-content>

S'il vous plaît voir cet écran, peut-être cela rend mon mauvais anglais mieux à comprendre.

Answer 1

Réglez la hauteur et le débordement dans la zone de texte:

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

Il vaut mieux le faire par un class, mais j'utilise style ici pour une compréhension facile.