'Vuetify v-card fit all height possible in v-col
I'm building a login/signup page with vue and vuetify. I put the code below (the text is in italian bc i am italian but you can get the point):
<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 as you will see the "Registrati" (sign up) card has a lower height than the Login card. Is there a way (with css preferably but if no way with js) to make the height the same as the login card so that they look better?
Thanks! Have a nice day!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
