Vuetify v-card fits all heights possible in v-col
I'm building a login/registration page using vue and vuetify. I put the code below (the text is in Italian because I'm Italian, but you get the idea):
<v-row
align="center"
justify="center"
class="prova"
>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
>
<v-card
>
<v-card-title class="center">
Login
</v-card-title>
<v-card-text
class="center"
>
<v-container>
<v-form>
<v-text-field
label="Email"
required
></v-text-field>
<v-text-field
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
label="Password"
counter
@click:append="showPassword = !showPassword"
></v-text-field>
<v-btn
color="primary"
>
Accedi
</v-btn>
</v-form>
</v-container>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
fill-height
>
<v-card
>
<v-card-title class="center">
Registrazione
</v-card-title>
<v-card-text class="center">
<v-container >
<div
>Vuoi accedere al sito
ma non sei registrato?
Clicca qui sotto
per farlo subito!</div>
<br>
<v-btn
color="primary"
>
Registrati
</v-btn>
</v-container>
</v-card-text>
</v-card>
</v-col>
</v-row>
If you try this, you will see that the "registration" (registration) card is lower in height than the login card. Is there a way (preferably with CSS, but without JS) to make the height the same as the login cards so they look better?
Thanks! Have a nice day!
