Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

782
Vistas
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!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

enter image description here

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda