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!
Check this codesandbox I made: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue
Remove align="center" from your v-row. Then just add the css height:100% to your v-card
UPDATE:
To set a fixed height to v-card only on mobile view you, can use vuetify's display breakpoints, in this case I applied them to the style attribute, but you can use it with any html attribute and any place with js.
<!-- Card 1 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : ''">
...
</v-card>
<!-- Card 2 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : 'height:100%'">
...
</v-card>