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!
Check this codesandbox I made: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue
Remove
align="center"
fromv-row
. Then just add the cssheight:100%
to yourv-card
renew: To set a fixed height for
v-card
only on mobile views, you can use vuetify's display breakpoints, in this case I applied them tostyle
attribute, but you can use it with any html attribute and anywhere with js.