I am working on vuetifyjs and currently stuck while trying to achieve this(below) in a vuetify way.
,
Please correct me if i am wrong, align-self-end must align v-flex to the end of the v-layout?
This is what I have tried.
Any suggestions would be helpful
https://jsfiddle.net/fierce_trailblazer/bp3f1wct/5/
It is at the end of v-layout, but v-layout is only as big as it needs to be because you didn't set a height attribute on it nor v-container.
Also, because v-flex items have a flex-grow property of 1, they will fill all the remaining space, meaning that there is no empty space left to 'align' the separate items.
Finally, you're working with Vuetify 0.16.6 (in your fiddle), which doesn't have the align-self-xxxxx props according to the v1 Vuetify docs.
What you can do in your situation, is use the flex-grow: 1 property of the first v-flex item, and replace the thing you want at the bottom with a normal div (which has flex:grow: 0) so it's automatically pushed to the bottom.
Alternatively: get rid of the v-flex altogether, because you're not using the column as a grid, so you don't need the subdivisions. Then use justify-space-between on the column layout.
<div id="app">
<v-container fluid style="height: 400px;">
<v-layout class="fill-height layout" column>
<v-flex shrink class="topitem">
<v-layout class="layout" row>
<v-flex xs12>
<v-btn primary dark>Normal vflex 1</v-btn>
</v-flex>
<v-flex xs12>
<v-btn primary dark>Normal vflex 2</v-btn>
</v-flex>
</v-layout>
</v-flex>
<div class="bottomitem">
<v-btn primary dark>Should be fixed to bottom</v-btn>
</div>
</v-layout>
</v-container>
</div>
Here's a working fiddle that achieves what you want: https://jsfiddle.net/q69wuk28/13/
Here's an article about flexbox, which is used by vuetify's v-layout/v-flex components: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div id="app">
<v-container fluid pa-0 ma-0 style="backgroundColor:yellow">
<v-layout class='page' pa-0 ma-0 style="backgroundColor:red;height:100vh" column >
<v-flex xs12 pa-0 ma-0>
<v-layout pa-0 ma-0 row>
<v-flex xs12 pa-0 ma-0><v-btn primary dark>Normal vflex 1</v-btn></v-flex>
<v-flex xs12 pa-0 ma-0 ><v-btn primary dark>Normal vflex 2</v-btn></v-flex>
</v-layout>
</v-flex>
<v-flex xs12 pa-0 ma-0 style="display:flex">
<v-btn style="align-self:flex-end" primary dark>Should be fixed to bottom</v-btn></v-flex>
</v-layout>
</v-container>
</div>
Your problems:
container was not on a full page
Vuetify deprecate v-flex block, now you can add to classes '.d-flex', position too writing in a class like "justify-space-between"
Related
I have tried loads of different options with the following code, however, I can't get this to fill the remaining height. (The second layout should fill the remaining height) what am I doing wrong here?
<template>
<div class="earnIndex">
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex
v-for="(offer, index) in offers"
:key="index"
xs2
class="pa-1"
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card>
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
EDIT:
So here is my new code:
<template>
<v-layout column wrap>
<v-flex>
<v-layout row wrap class="red">
<v-flex
v-for="(offer, index) in offers"
:key="index"
class="pa-1"
xs2
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow align-content-start>
<v-card height="100%">
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</template>
This creates the following:
I would like the card with "test" to start straight after the links at the top, and then fill the rest of the height.
Thank you in advanced for your help!
Regards,
Josh
Try using column fill-height on the right side, and then grow on the v-flex...
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
<v-btn>{{ offer.siteName }}</v-btn>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card class="fill-height">
<p> test </p>
</v-card>
</v-flex>
</v-layout>
</v-container>
https://codeply.com/p/bwE5ifP4Pe
You don't need as much markup in your scenario and can cut this down to just a few lines.
I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 2.0 (https://vuetifyjs.com/en/components/grids/).
<div class="d-flex fill-height" style="flex-direction:column">
<v-row class="blue">
<v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
<v-btn>{{ i }}</v-btn>
</v-col>
</v-row>
<div class="fill-height" style="background-color: salmon">Down</div>
</div>
Codesandbox example
I have a problem with the code shown below. I want it to be fixed, therefore filling the height and the width, eliminating the scrollbar if possible.
Here is code sample:
<template>
<div class="mt-10 pt-10">
<v-container fluid ma-0 pa-0 fill-height>
<v-layout row wrap class="ma-0 pa-0">
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card height="900" class="ma-0 pa-0" id="rounded-card">
<v-img
src="img.jpg"
height="100%"/>
</v-card>
</v-flex>
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card class="ma-0 pa-0 elevation-5" height="900">
<item_att/>
<v-divider/>
<item_pro/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I want my website to have similar layout to this page: https://nephos.cssninja.io/product.html
Here's my sample page: https://thestackoverflow.netlify.com/single
I am trying to implement vuetify v-list Avatar with 3 lines using the vuetifyhttps://vuetifyjs.com/en/components/lists#examples documentation. However the list is displayed but doesn't not cover the full width of the screen.
here is my code
<template>
<v-container fluid>
<v-layout row wrap>
<v-flex>
<v-list>
<template v-for="(item, index) in items">
<v-subheader
v-if="item.header"
id="item.header"
:key="item.header"
v-html="item.header"
></v-subheader>
<v-divider
v-else-if="item.divider"
:key="index"
:inset="item.inset"
></v-divider>
<v-list-item v-else :key="item.title" two-line>
<v-layout row wrap justify-space-between>
<v-flex xs12 md4>
<v-list-item-avatar>
<v-img :src="item.avatar"></v-img>
</v-list-item-avatar>
</v-flex>
<v-spacer />
<v-flex xs12 md8>
<v-list-item-content>
<v-list-item-title v-html="item.title"></v-list-item-title>
<v-list-item-subtitle
v-html="item.subtitle"
></v-list-item-subtitle>
</v-list-item-content>
</v-flex>
</v-layout>
</v-list-item>
</template>
</v-list>
</v-flex>
</v-layout>
</v-container>
</template>
here is how it looks now but i would like to increase the width to cover most of the screen if not all.
Checking out the codepen example [a link] (https://codepen.io/pen/?&editable=true&editors=101) on Vuetify for the Avatar with 3 lines
They have the width setup in their v-card
<v-card
max-width="450"
class="mx-auto"
>
You should have something like this above where you start your template, maybe right below where the app is started div id="app"
If you don't have anything like that, try putting it in the v-container
<v-container max-width="1080" fluid>
Hope that works!
I found the reason why it didn't work. In my index file (which is the parent file) in which I call the component that has this code, I had <v-layout column wrap> instead of <v-layout row wrap>.
<template>
<v-container class="mx-auto">
<v-layout column wrap>
<v-flex>
<MyProfile />
<Education :items="items" />
</v-flex>
</v-layout>
</v-container>
</template>
This caused the width to be small. Once I changed it to row, the width of the layout expanded.
I want the textbox to be 6 column on screen greater than sm and 12 column for mobile.
I use the vuetify grid but it does not work as expected.
this is my code:
<v-card-text>
<v-layout warp>
<v-flex xs12 sm6 class="pa-1">
<v-text-field
ref="name"
v-model="password.name"
label="Name"
solo
placeholder="Full Name"
counter="25"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-1">
<v-combobox
v-model="password.keys"
label="Add keys"
chips
solo
multiple
>
<template slot="selection" slot-scope="data">
<v-chip :selected="data.selected" close #input="remove(data.item)">
<strong>{{ data.item}}</strong>
</v-chip>
</template>
</v-combobox>
</v-flex>
</v-layout>
In the mobile view, the elements are in the same row.
What can be the reason, and how can I fix it?
This is the mobile version:
You have a typo on the "v-layout" should be wrap not warp.
https://codesandbox.io/s/my49o8vo9y
I am trying to make list of cards using vuetify v-flex here is the code
<div id="app">
<v-app>
<v-content>
<v-container fill-height fluid>
<v-layout>
<v-flex xs12>
<v-card dark color="grey">
<v-card-title>
<div>
<h2>Top Questions</h2>
</div>
</v-card-title>
</v-card>
</v-flex>
<v-flex xs12>
<v-card v-for="item in items" :key="item._id">
<v-card-title>
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
I am expecting each v-flex will fill 100% of the row. However, they only filled half of it.
https://codepen.io/anon/pen/mKBMEW
I can, however, add prop d-inline-block at v-layout. I am just curious about what happened with my first code before.
When I used Ikbel's column solution, my flex-components max-width was overwritten to always be 100%. What I did is give row wrap attributes to v-layout.
I think you need to add column attribute to v-layout.
For those who pass through this again.
In latest vuetify (from v2.x, e.g. 2.4), no longer has xs on v-col any more, use cols=12 instead.
Related post: vuetify v-col xs="12" only fill half the width