I would like to set the v-col width with the h1, in the code below, to 100% of the page, how can i do it?
<v-main class="pt-0 black" max-width="auto">
<v-row>
<v-col cols="auto">
<v-img src="#/assets/images/riot-logo.png"></v-img>
</v-col>
<v-col cols="auto">
<v-container class="riot-text">
<h1 class="text-center">Riot Games</h1>
</v-container>
</v-col>
</v-row>
</v-main>
</template>
The columns are adjacent to one another, so you can't make one 100% without setting the other to zero. In order to set the column to width 100%, you will need to place each column in it's own row. I also removed the cols="auto" attribute.
<v-main class="pt-0" max-width="auto">
<v-row>
<v-col cols="auto">
<v-img src="#/assets/images/riot-logo.png"></v-img>
</v-col>
</v-row>
<v-row>
<v-col>
<v-container class="riot-text fluid">
<h1 class="text-center">Riot Games</h1>
</v-container>
</v-col>
</v-row>
</v-main>
Related
can any body help, why in vuetify under v-col always align center ?
i try to make simple paragraph, but why always align center ?
here is my code
<v-container>
<v-row>
<v-col cols="12" md="8">
<p>test paragraph</p>
</v-col>
<v-col cols="12" md="4">
<p>test kedua</p>
</v-col>
</v-row>
</v-container>
I have a code pen inside this code pen I have vuetify 2.2.15.
I've used footer as follow:
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card>
<v-card-text>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-content>
<v-footer>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-app>
</div>
In the real code running on the web, this footer is aligned at the absolute bottom. But in the code pen, the footer is NOT aligned at the absolute bottom, but just follow the previous component relatively.
Is there any missing stack I should have used? Thank you for your suggestion.
you should use absolute in your v-footer like:
<v-footer absolute>
<v-col class="text-center">
footer
</v-col>
</v-footer>
absolute prop applies position: absolute to the component.
also you should move </v-content> after your footer
your final code should be like:
<div id="app">
<v-app>
<v-content>
<v-navigation-drawer app></v-navigation-drawer>
<v-container>
<v-card
>
<v-card-text
>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-footer absolute>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-content>
</v-app>
</div>
I'm currently creating a grid-layout in Vuetify, but I got stuck. I'm making a card-layout containing images. Here is the example:
I've tried it with the following code, but then small cards on the right are not aligned due to the margins.
<v-container>
<v-row class="justify-center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card
to="/pools"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
>
<v-img class="white--text" :src="images[0]">
<v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
<template v-slot:placeholder>
<v-row class="fill-height" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-hover>
</v-col>
<v-col cols="2">
<v-card class="ma-2" light height="50%"></v-card>
<v-card class="ma-2" light height="50%"></v-card>
</v-col>
</v-row>
<v-row class="justify-center">
<v-col cols="8">
<v-card light height="120px"></v-card>
</v-col>
</v-row>
</v-container>
Does anyone have a suggestion, or maybe a similar example?
Thanks in advance!
Luckily you only need to make minor adjustments to the smaller cards on the right. Make use of flex and let flex do its magic :) It's basically telling the cards to grow to the maximum height available without clipping. Then add some margin in between the cards with the helper classes mb and mt.
<v-col cols="2" class="d-flex" style="flex-direction:column">
<v-card class="mb-1 flex-grow-1">
Upper card
</v-card>
<v-card class="mt-1 flex-grow-1">
Lower card
</v-card>
</v-col>
As a codesandbox. Check out the file "layout.vue" for the complete example.
In the document, justify-** and align-** are design for determine where the grid block should be placed, but how can I make the content inside the v-col align to right?
Here is a small example that aligns content to the right inside v-col (in this case a close button):
<v-row>
<v-col align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
Or with multiple columns:
<v-row>
<v-col cols="9">
<h2>Title</h2>
</v-col>
<v-col cols="3" align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
So you simply need to add
align="right"
as a parameter at v-col to align content to the right side within a v-col.
Bit late to this. I came here for a solution and ended up RTM. align="right" doesn't work for all components inside v-col. The way to left/right/center align is to use v-spacer. If you want to right align, add a v-spacer to the left of your component inside of v-col. v-col also needs d-flex class.
<v-app>
<v-container>
<v-row>
<v-col cols="8">
</v-col>
<v-col class="d-flex" cols="4">
<v-spacer />
<!-- insert any other content here to right align inside this col -->
</v-col>
</v-row>
</v-container>
<v-app>
You can also add the class .text-right if you're trying to align a button or text
According to the code of the Playground example in Vuetify's Grid System page, you could put an EXTRA v-row inside your v-col, and use justify-** in this newly added v-row. E.g.:
<v-app>
<v-container>
<v-row>
<!-- first column -->
<v-col cols="8">
<!-- the extra row -->
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-col>
<v-col cols="4">
Second column
</v-col>
</v-row>
</v-container>
<v-app>
Or, if the v-col is the ONLY column in your first-level v-row, you MAY get rid of that, just put your content in the v-row to which you can apply the justify. E.g.:
<v-app>
<v-container>
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-container>
<v-app>
I'm losing my mind here with Vuetify 2.0, I need to convert the old layout/flex to the new row/col syntax and I can't seem to do it.
I need to convert the following to the new 2.0 syntax:
<v-layout row wrap>
<v-flex xs12 sm4> 1 </v-flex>
<v-flex xs12 sm4> 2 </v-flex>
<v-flex xs12 sm4> 3 </v-flex>
</v-layout>
Which would have the columns wrapped on XS devices and in a line on SM devices.
I've got the following, but how do I 'wrap' them with the breakpoints?
<v-row>
<v-col xs="12" sm="4" >1</v-col>
<v-col xs="12" sm="4" >2</v-col>
<v-col xs="12" sm="4" >3</v-col>
</v-row>
On XS devices, it should be:
1
2
3
Instead, I get them bunched together: 1 2 3
This is annoying me more than it should :(
To make it work, you have to set cols to auto or between 1-12, then adjust your col sizes viewports.
<v-row>
<v-col cols="auto" md="4" sm="12" >1</v-col>
<v-col cols="auto" md="4" sm="12" >2</v-col>
<v-col cols="auto" md="4" sm="12" >3</v-col>
</v-row>
or
<v-row>
<v-col cols="12" md="4" sm="12" >1</v-col>
<v-col cols="12" md="4" sm="12" >2</v-col>
<v-col cols="12" md="4" sm="12" >3</v-col>
</v-row>
I prefer the later.