I'm trying to use a vertical space-between on my components, or at least use the flexbox capabilities of the framework.
Here is what I want to achieve with an image, the first image represents what I have with my current code and the second is what I want to achieve:
Here is the basic markup I wrote, I reproduced it on a jsFiddle if you want to play with it: https://jsfiddle.net/tgpfhn8m/357/
<v-layout row wrap>
<v-flex xs8>
<v-card class="red" height="400px">
Fixed Height Card
</v-card>
</v-flex>
<v-flex xs4 class="purple">
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-flex>
</v-layout>
What did I try?
I tried various methods. The first one was to include a v-layout:column into the second column, and apply a justify-space-between to it. Without success (https://jsfiddle.net/tgpfhn8m/358/):
<v-flex xs4 class="purple">
<v-layout column justify-space-between>
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-layout>
</v-flex>
I tried a lot of other combinations of elements and properties, without success either.
What am I doing wrong? Is it even possible to achieve what I want with native Vuetify elements?
You have to delete the middle v-flex.
You can also use align-end on a v-layout with the last card in it.
If you want to keep padding between the two columns, you can add class pr-x with x a number between 0 and 5 to the first v-flex.
To keep the second column filling the height use fill-height on the v-layout wrapped in a v-flex.
Fiddle with padding
Spacing doc from Vuetify
Code answer :
<v-app>
<v-layout row wrap >
<v-flex xs8 class="pr-3">
<v-card class="red" height="400px">
Fixed Height Card
</v-card>
</v-flex>
<v-flex >
<v-layout column justify-space-between class="purple" fill-height>
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-layout>
</v-flex>
</v-layout>
</v-app>
For anyone else who needed this advice:
Use <v-layout align-center> together with <v-flex fill-height>
This vertically aligns the children:
<v-layout align-center>
<v-flex fill-height></v-flex>
<v-flex fill-height></v-flex>
</v-layout>
Related
Could Any one help me...I want to show cards in a carousal.In the first carousal I want three cards to be show and the second carousal I want to show only two cards. my problem is that In first carousal and second carousal total cards are shows..
<v-flex>
<v-carousel hide-delimiters style="box-shadow: 0px 0px" prev-icon>
<v-carousel-item v-for="i in 2" :key="i">
<v-layout row>
<v-flex sm4 v-for="j in color" :key="j" pl-2 pr-2>
<v-card :color="j">
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
<div> Card text </div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
</v-flex>
<script>
export default{
data(){
return{
color: ['red','orange','green','primary','error']
}
}
}
</script
Check this codesandbox I made: https://codesandbox.io/s/stack-70202529-v4251?file=/src/components/CarouselExample.vue
I assume that's because you're trying to generate the v-carousel-item with a v-for. Do you want to generate the v-card's dinamically? If so, you'll get the text from an array? If the cards will have static text you could simply create each carousel item manually.
I'm new to Vue and Vuetify and this is probably something obvious, but I'm googling it for over an hour and I'm still stupid.
So basically I want to create wrapper using full height of viewport with one element aligned top, and one bottom (This will be inside v-navigation-drawer, few buttons on top and one bottom)
Here's sample code
<v-container fluid fill-height>
<v-row align="start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row align="end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
And this is how it looks https://codepen.io/rafal_w/pen/ExXeeWm
As you can see fill-height tag positions elements evenly with margins, and align tag on elements doesn't work. What do i do wrong?
In my opinion the better way to do this with Vuetify is the following:
<v-app id="app">
<v-card height="1000">
<v-app-bar
color="red"
dense
fixed
flat
dark
>
<v-spacer></v-spacer>
<span>Align Top</span>
<v-spacer></v-spacer>
</v-app-bar>
</v-card>
<v-bottom-navigation fixed color="green">
<v-spacer></v-spacer>
<span>Align Bottom</span>
<v-spacer></v-spacer>
</v-bottom-navigation>
</v-app>
Ok, so instead of align tag on child items, i was supposed to use align-self-start and align-self-end classes
https://codepen.io/rafal_w/pen/WNOaXVL
<v-container fluid fill-height>
<v-row class="align-self-start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row class="align-self-end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
In my application, the results page is composed of three blocks :
left : summary of the search
middle : results
right : map of the results
I don't know how to fix the position (position: fixed) of the left and right blocks with Vuetify.
My goal is to keep the left and right blocks displayed while scrolling the list of results (in the middle).
<v-content>
<v-container style="max-width:1264px" class="pa-0">
<v-layout row wrap>
<v-flex xs12 sm5 md3 class="">
<div style="background-color:red;color:white;height:300px">SEARCH FIXED</div>
</v-flex>
<v-flex xs12 sm7 md4 class="pt-3 pa-2 green">
RESULTS:<br/> ...
</v-flex>
<v-flex class="" xs12 md5>
<div style="background-color:blue;color:white;height:200px">MAP FIXED</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
Here is the codepen of my application
Vuetify uses a 12-point grid system. Since 12 is not divisible by 5, how does one create a grid with 5 columns of the same width? The 5 columns should take all available space.
What's the most "correct" way to do this?
EDIT:
I tried to implement John M's comment, but it doesn't fill up all the available horizontal space:
<v-container>
<v-card color="red">
<v-layout wrap align-content-space-around text-xs-center>
<v-flex xs1></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
<v-flex xs1></v-flex>
</v-layout>
</v-card>
</v-container>
I want the red areas to be gone:
I needed a five columns layout too, and I found something that's working for me. I needed the five columns layout for lg screens, so I added these rules in my css:
https://codepen.io/rekam/pen/JmNPPx
/* vuetify lg min breakpoint: 1280 - 16 = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */
#media (min-width: 1264px) and (max-width: 1903px) {
.flex.lg5-custom {
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
}
You need to specify min and max in media query, because of you don't, the 20% rule will apply for all sizes. And simply use it in your template like this:
<!-- md4 is just here as an example -->
<v-layout row wrap>
<v-flex md4 class="lg5-custom">box 1</v-flex>
<v-flex md4 class="lg5-custom">box 2</v-flex>
<v-flex md4 class="lg5-custom">box 3</v-flex>
<v-flex md4 class="lg5-custom">box 4</v-flex>
<v-flex md4 class="lg5-custom">box 5</v-flex>
<v-flex md4 class="lg5-custom">box 6</v-flex>
<v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>
What i needed was 5 column grid after medium display size
i wrote a inline style with a breakpoint condition
<v-row>
<v-col v-for="n in 10"
:style="$vuetify.breakpoint.mdAndUp ? ' flex: 1 0 18%;' : ''"
cols="6"
sm="3" >
{{items inside each column}}
</v-col>
</v-row>
Does the content have to be in a card component? I'm asking because it wasn't specified in your question. If it isn't, you can accomplish this by removing the card component and replacing/adding some props to your container and layout components.
<div id="app">
<v-container align-center text-xs-center>
<v-layout justify-center>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
</v-layout>
</v-container>
</div>
Instead of specifying the cols number <v-col cols="12"> write xl="auto"
<v-col xl="auto">
How to I can make block "pink-box", placed on rest of height in Vuetify grid system? "height: 100%" work incorrect. Column flex direction and "flex: 1" break xs6 layout.
<div id="app">
<v-app>
<v-content>
<v-container grid-list-md fill-height>
<v-layout row wrap align-content-start>
<v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
<v-flex xs12 class="pink-box">Rest height box</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
See worked code snippet on Codepen:
https://codepen.io/profsoft/pen/wmQRvm
We must use in container two nested layouts.
First - column, for text block and rest height box.
Second, nested - row wrap, for correct 12 point grid system placed in text block.
<div id="app">
<v-app>
<v-content>
<v-container grid-list-md fill-height>
<v-layout column>
<v-flex>
<v-layout row wrap align-content-start>
<v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 class="pink-box">Rest height box</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
See solution code snippet on Codepen:
https://codepen.io/profsoft/pen/KoLMrz