i've been stuck for hours just to align an item vertically and horizontally in v-card. this image below is what i currently have, i just have to align the item vertically but i dont know how. can anyone help me? thanks in advance
My code :
<div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
<v-col class="fill-height" height="500">
<v-card class="text-center grey" height="100%">
<div align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
computed: {
deviceHeight(){
return this.$vuetify.breakpoint.height;
},
deviceWidth(){
return this.$vuetify.breakpoint.width;
},
},
The align and justify props are used for some Vuetify components, but they won't work on a native HTML div. Instead use the appropriate classes on the v-card...
<v-card class="text-center grey d-flex flex-column align-center justify-center" height="100%">
<div>
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
Demo
v-row behaves as the flex-container and all the props like justify or align or any flex container property will work to it only. Just change ur div to v-row. Althought there is one problem with that is v-row have some negative margin which you can rid off by using no-gutters
<div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
<v-col class="fill-height" height="500">
<v-card class="text-center grey" height="100%">
<v-row no-gutters align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
Related
I want to implement the below carousel in vuetify3? How can I do that?
Use the Grid component inside of the Carousel.
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows="hover"
>
<v-carousel-item
v-for="(color, i) in colors"
:key="color"
>
<v-sheet
:color="color"
height="100%"
tile
>
<v-row
style="height:100%;"
align="center"
justify="center"
>
<v-col v-for="(i, index) in 2" :key="index">
<div class="text-h2 d-flex align-center justify-center">Column</div>
</v-col>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
Docs: https://next.vuetifyjs.com/en/components/grids/
Example: https://codepen.io/alexpetergill/pen/oNMoQae
I have an outer Vue template:
<template>
<v-container fluid>
<div>
<v-row>
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
<gokb-reviews-title-card
:id="i.id.toString()"
#keys="addkeyFields"
/>
</v-col>
</v-row>
</div>
</v-container>
</template>
and an inner Vue template (gokb-reviews-title-card)
<template>
<v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name">
<v-card-title primary-title>
<h5 class="titlecard-headline">{{ title.name }}</h5>
</v-card-title>
<v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
<div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
<div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
</v-card-text>
<v-card-text class="flex" v-if="!!title?.history">
<div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
<div class="titlecard-history">{{ title.history }}</div>
</v-card-text>
</v-card>
</template>
The row consists of 3 gokb-reviews-title-cards. I want to have it 4 cards.
I've tried to change it by adding cols="3" to the v-col as discussed in this question. This did not show any effect.
Adding a CSS .grid to the outer-most <div> (discussed here) can change the width of a card, but the maximum number of cards per row stays 3. The row is "half-filled" then. The CSS I tried is:
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};
How can I make the <v-row> contain 4 <v-col>s thet each contain 1 card?
I think it is because you have md="4" in
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
if you change it to 3 it should work since it's a 12-based grid
<v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">
in addition, your cols="3" might not be working because it only applies to widths narrower than the md breakpoint.
If you are using responsive layouts keep the md, but also define other widths, either through cols or xs. Otherwise just use cols
I'm trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters>
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here there's the codepen
How can I align those two columns?
Add align prop to the row component with center as value :
<v-row no-gutters align="center">
In order to do that, you can add class="d-flex align-center" to the v-row
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters class="d-flex align-center">
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here's the codepen
I have a dashboard that contains tiles in 3 rows, each row contains 5 tiles. Like the below picture
I am using the below code for tiles:
<v-layout row wrap>
<v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
<v-card flat tile class="d-flex">
<v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
</v-img>
<div class="content">
<h3 align="center">A</h3>
</div>
</v-card>
</v-flex>
<v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
<v-card flat tile class="d-flex">
<v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
</v-img>
<div class="content">
<h3 align="center">A</h3>
</div>
</v-card>
</v-flex>
... so on
</v-layout>
Below is my CSS code to customize the tiles:
#media (min-width: 1264px) and (max-width: 1903px) {
.flex.lg5-custom {
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
.flex.lg10-custom {
width: 40%;
max-width: 40%;
flex-basis: 40%;
}
}
Even small screen sometimes 3rd row last tiles don't support.
.flex.lg10-custom CSS used for 3rd rows last tile.
I wanted to support this landing page for all screen (especially large screen). Any idea?
So, I have resolved it by using v-row and v-col instead of v-flex. However, all the tiles got small compare to the previous one because the entire row size is 12 and I divided by 5 so, that I can only utilize only 10, not 12. I had to leave 1 from left and 1 from the right to make it center. Below is my code:
<v-container fluid>
<v-row justify="center">
<v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
<v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
<v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
</v-img>
<div class="content">
<h3 align="center">A</h3>
</div>
</v-card>
</v-col>
<v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
<v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
<v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
</v-img>
<div class="content">
<h3 align="center">A</h3>
</div>
</v-card>
</v-col>
... so on
</v-row>
.... last row last col
<v-row justify="center">
... first 3 will be the same as before
<v-col cols="4" class="pb-1 pt-1 pl-1 pr-1">
<v-card elevation="23" class="secondary d-flex" height="50%">
<v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
</v-img>
<div class="content">
<h3 align="center">A</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
If anyone wants the full solution, please comment below.
The Create account link and the Continue button are not on the same height. How do I fix this?
Here's my code:
<v-col cols="6">
<a
class=""
style="vertical-align: bottom white-space: nowrap"
#click="redirectSignup()"
>Create account</a
>
</v-col>
<v-col class="d-flex justify-end" cols="6">
<v-btn
depressed
color="primary"
#click="
valid ? checkEmailAndContinue({ email: emailField }) : $refs.email.validate()
"
>Continue</v-btn
></v-col
>
I solved it by making the column and the tag a flex and aligning the tag to the center like that:
<v-col class="d-flex" shrink>
<a class="d-flex align-center" style="white-space: nowrap" #click="redirectForgot()"
>Forgot password?</a>
</v-col>