Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

786
Views
Vuetify v-card se ajusta a todas las alturas posibles en v-col

Estoy creando una página de inicio de sesión/registro con vue y vuetify. Pongo el código a continuación (el texto está en italiano porque soy italiano pero puedes entender el punto):

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

Si prueba esto, verá que la tarjeta "Registrati" (registrarse) tiene una altura más baja que la tarjeta de inicio de sesión. ¿Hay alguna forma (preferiblemente con css, pero si no con js) de hacer que la altura sea la misma que la de la tarjeta de inicio de sesión para que se vea mejor?

¡Gracias! ¡Que tengas un lindo día!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Verifique este codesandbox que hice: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue

Elimine align="center" de su v-row . Luego simplemente agregue la height:100% a su v-card

ACTUALIZACIÓN: para establecer una altura fija en v-card solo en la vista móvil, puede usar los puntos de interrupción de visualización de vuetify , en este caso los apliqué al atributo de style , pero puede usarlo con cualquier atributo html y en cualquier lugar con 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>

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!