I've my component at the top of the page but I want in in the middle.
Like this:
This is my code:
<template>
<v-container class="align-center" fill-height fluid>
<v-row class="d-flex justify-center mb-6">
<h1>Contador <v-icon>mdi-clock-outline</v-icon></h1>
</v-row>
<v-row class="d-flex justify-center mb-6">
<h2>{{ count }}</h2>
</v-row>
<v-row class="d-flex justify-center mb-6">
<v-btn #click="increment" class="mx-5" icon><v-icon>mdi-plus</v-icon></v-btn>
<v-btn #click="decrement" class="mx-5" icon><v-icon>mdi-minus</v-icon></v-btn>
</v-row>
</v-container>
</template>
How can I put everything in the middle? using vuetify3 if it's possible, and thanks in advance.
Add d-flex class names to the container component and wrap v-row's with v-col component:
<v-container class="align-center d-flex" fill-height fluid>
<v-col>
<v-row class="d-flex justify-center mb-6">
<h1>Contador <v-icon>mdi-clock-outline</v-icon>
</h1>
</v-row>
<v-row class="d-flex justify-center mb-6">
<h2>{{ count }}</h2>
</v-row>
<v-row class="d-flex justify-center mb-6">
<v-btn class="mx-5" icon>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn class="mx-5" icon>
<v-icon>mdi-minus</v-icon>
</v-btn>
</v-row>
</v-col>
</v-container>
demo
Apparently fill-height doesn't exist in Vuetify 3, it's class="h-100"
Source: https://github.com/vuetifyjs/vuetify/issues/15733#issuecomment-1236087299
Related
The code is shown below.
<v-container fluid>
<!-- page title -->
<v-row>
…
</v-row>
<!-- body -->
<v-row justify="center" no-gutters>
<!-- input -->
<v-col cols="5">
<v-card outlined height="80vh" max-height="80vh" class="pa-8">
<!-- image upload -->
<v-row>
<v-col>
<v-file-input
accept="image/png, image/jpeg"
chips
label="Choose an image(JPG or PNG)"
outlined
prepend-icon="image"
show-size
v-model="image"
#change="previewImage"
#click:clear="clearAll"
></v-file-input>
</v-col>
</v-row>
<!-- image preview -->
<v-row>
<v-col>
<p v-if="no_image" class="text-center text-h4 grey--text">
Image Preview
</p>
<v-img v-else :src="imageUrl" contain max-height="55vh"></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
<!-- button -->
<v-col align-self="center" cols="2">
…
</v-col>
<!-- output -->
<v-col cols="5" align-self="center">
…
</v-col>
</v-row>
</v-container>
Current style is
but the p element "Image Preview" is expected to be centered vertically in the v-card.
I have tried to add some properties like align="center", class="align-center", align-self="center" and more to some relative elements but none of them work.
How can I do this?
The following is enough to center the second div in the middle of the height.
<template>
<v-container fluid>
<v-row>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<v-card outlined height="80vh" max-height="80vh" class="pa-8 d-flex flex-column">
<v-row class="flex-grow-0">
<v-col>
<v-file-input accept="image/png, image/jpeg" chips label="Choose an image(JPG or PNG)" outlined
prepend-icon="image">
</v-file-input>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex flex-column justify-center">
<p class="text-center text-h4 grey--text">
Image Preview
</p>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col align-self="center" cols="2">
</v-col>
<v-col cols="5" align-self="center">
</v-col>
</v-row>
</v-container>
</template>
This is how it looks
The additional margin under the text comes from that one
Here is a really nice + short cheatsheet regarding flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use display flex property:
display: flex;
align-items: center;
I want to quantify my v-img like the one you see in the image below.
Is there a way to make something like the image you see with vuetify's v-img.
<div class="row">
<v-img style="margin:2px" max-height="301" max-width="380"
:key="index" v-for="(image, index) in post.userPostImg"
:src="$store.state.baseURL + '/news/' + image"> </v-img>
</div>
Create two rows with no-gutters prop, the first one contains one image and the other one contains three columns that conain the 3 images :
<v-row no-gutters>
<v-col cols="12">
<v-img :src="`https://picsum.photos/500/300?image=51`" aspect-ratio="1">
</v-img>
</v-col>
</v-row>
<v-row no-gutters>
<v-col cols="4">
<v-img :src="`https://picsum.photos/500/300?image=52`" aspect-ratio="1">
</v-img>
</v-col>
<v-col cols="4">
<v-img :src="`https://picsum.photos/500/300?image=53`" aspect-ratio="1">
</v-img>
</v-col>
<v-col cols="4">
<v-img :src="`https://picsum.photos/500/300?image=54`" aspect-ratio="1">
</v-img>
</v-col>
</v-row>
LIVE DEMO
I'm new to Vue and Vuetify. My question is about aligning buttons.
I have a container that contains a couple of v-text-fields and v-combobox they are centered in the middle of the container.
Now I want to have three buttons below this form, but whatever I try to do they are not aligned vertically, every button appears lower than the others. How can I correct this such that they are nicely aligned on the top?
<template>
<div class="ladder">
<v-container fluid>
<v-row justify="center">
<v-col cols="12" sm="6">
<v-text-field
v-model="higher_price"
:rules="[rules.required, rules.number]"
label="Higher Price"
></v-text-field>
<v-text-field
v-model="lower_price"
:rules="[rules.required, rules.number]"
label="Lower Price"
></v-text-field>
</v-col>
</v-row>
<v-row align="start">
<v-spacer></v-spacer>
<v-col align="center" xs="4" >
<v-btn color="primary"></v-btn>
</v-col>
<v-col>
<v-col align="center" xs="4" >
<v-btn color="primary"></v-btn>
</v-col>
</v-col>
<v-col>
<v-col align="center" xs="4" >
<v-btn color="primary"></v-btn>
</v-col>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
There are two v-col which are not valid in the template you created, removing those will solve your issue..
Try this..
<v-row align="start">
<v-spacer></v-spacer>
<v-col align="center" xs="4" >
<v-btn color="primary"></v-btn>
</v-col>
<v-col align="center" xs="4" >
<v-btn color="primary"></v-btn>
</v-col>
<v-col align="center" xs="4">
<v-btn color="primary"></v-btn>
</v-col>
<v-spacer></v-spacer>
</v-row>
I'm trying to justity a v-btn to the right. I have tried everything and it's not working, I just want to know the easiest way to make the register button sit on the very right of the column.
Here is the Codepen and code.
<v-container>
<v-row class='justify-center'>
<v-col cols='6'>
<v-form #submit.prevent='submitForm'>
<v-text-field label='Username'></v-text-field>
<v-text-field label='Password' type='password'></v-text-field>
<v-btn type='submit' class='primary'>Login</v-btn>
<v-btn class='ml-2'>Register</v-btn>
</v-form>
</v-col>
</v-row>
</v-container>
I suggest you to wrap those 2 buttons within a row first. Then put each one of them in a column as follows:
<v-container>
<v-row class='justify-center'>
<v-col cols='6'>
<v-form #submit.prevent='submitForm'>
<v-text-field label='Username'></v-text-field>
<v-text-field label='Password' type='password'></v-text-field>
<v-row>
<v-col xs="6">
<v-btn type='submit' class='primary'>Login</v-btn>
</v-col>
<v-col xs="6" class="d-flex justify-end">
<v-btn>Register</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
</v-row>
</v-container>
The result of the above code is:
You can use flexboxes.
<div style="display:flex; justify-content:space-between">
<div>
<v-btn type='submit' class='primary'>Login</v-btn>
</div>
<div>
<v-btn class='ml-2'>Register</v-btn>
</div>
For more on flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can wrap your buttons in a div and set it to display:flex. Here is codepen. If you need both buttons to be on the right side replace justify-space-between with flex-end
How to align multiple rows with col="auto" in Vuetify?
I want to make cols="auto" the same width between multiple rows.
<div id="problem_list" class="text-center">
<v-row>
<v-col cols="auto">
ID
</v-col>
<v-divider vertical></v-divider>
<v-col class="text-left">
Title
</v-col>
<v-divider vertical></v-divider>
<v-col cols="auto">
Ratio
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
1
</v-col>
<v-divider vertical></v-divider>
<v-col class="text-left">
fdkj
</v-col>
<v-divider vertical></v-divider>
<v-col cols="auto">
8
</v-col>
</v-row>
</div>
Try to override some Vuetify CSS rules in order to have the same width whatever the number of columns :
.row{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(64px,auto));
}
please check this codepen sample
Remove the v-divider and cols="auto". Removing cols will make the col auto by default. If you want the dividers, use CSS instead.
Template:
<v-row>
<v-col class="test">
ID
</v-col>
<v-col class="test">
Title
</v-col>
<v-col class="test">
Ratio
</v-col>
</v-row>
<v-row>
<v-col class="test">
1
</v-col>
<v-col class="text-left test">
fdkj
</v-col>
<v-col class="test">
8
</v-col>
</v-row>
CSS:
.test {
border-left: 1px solid lightgray;
}
Codepen
But Judging for what you are trying to do, isn't it just better to just use v-simple-table or v-data-table instead?
Agree with the answer by BakaDesu.
If you want the table to look aligned and also with different column widths, you could add to the BakaDesu code some viewport breakpoints, that will give you the same look that the image you're suggesting but with aligned cols.
I think that using external CSS as Baka is suggesting is a better approach than modifying anything on vuetify base css, that is very probable to come back at you when code gets more complex.
BakaDesu code would look like this with viewport breakpoints.
<div id="app">
<v-app>
<v-content>
<v-container fluid>
<v-row>
<v-col md="1" class="test">
ID
</v-col>
<v-col md="10" class="test">
Title
</v-col>
<v-col md="1" class="test">
Ratio
</v-col>
</v-row>
<v-row>
<v-col md="1" class="test">
1
</v-col>
<v-col md="10" class="text-left test">
fdkj
</v-col>
<v-col md="1" class="test">
8
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
Also, why not using one of the vuetify available components for this matter, like
Simple tables
Data Tables
Data Iterators