I want to position Button (or any other component) at the center of the screen, not just line.
<div id="app">
<v-app id="inspire" fill-height fluid>
<v-container fill-height fluid>
<v-layout fill-height fluid>
<v-flex fill-height fluid align-center>
<v-btn>Click me</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
I'm aware of Jumbotron, but I actually want to position Form at the center and to add Toolbar and Footer later
Example at codepen
<v-content>
<!--- pick-up screen height so we can center vertically -->
<v-container fill-height>
<!--- vertical and horizontal alignment -->
<v-layout align-center justify-center>
<v-flex xs6>
<!--- v-flex is centered now, but we need to center button inside v-flex -->
<div class="text-xs-center">
<v-btn>Click me</v-btn>
</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
https://codepen.io/anon/pen/bKEEex
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
Hello!
I recently started using Vuetify 2.0 and I find myself stuck on something I was able to achieve really easy on Vuetify 1.5. I feel like I'm missing something pretty obvious.
Please help me achieve this result from this Vuetify 1.5 template:
<div id="app">
<v-app>
<v-content>
<v-container fluid fill-height class="grey darken-4">
<v-layout fill-height column wrap>
<v-flex>
<v-card height="100%">
<v-card-title>I fill the whole available vertical space.</v-card-title>
</v-card>
</v-flex>
<v-flex shrink>
<v-card>
<v-card-title>I'm shrinked to content vertically.</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
https://codepen.io/uatar/pen/rNaxoVV
column is no longer specific to the grid, it's now a generic flex-column class instead
shrink should be replaced with flex-grow-0 which prevents the element from growing but will not allow it to shrink below its original size
Other than that everything works pretty similarly:
<v-container fluid class="fill-height grey darken-4">
<v-row dense class="fill-height flex-column">
<v-col>
<v-card height="100%">
<v-card-title>I fill the whole available vertical space.</v-card-title>
</v-card>
</v-col>
<v-col class="flex-grow-0">
<v-card>
<v-card-title>I'm shrinked to content vertically.</v-card-title>
</v-card>
</v-col>
</v-row>
</v-container>
https://codepen.io/kaelwd/pen/abzdMWe?editors=1000
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 have been playing with vuetify, I've been trying to mimic a specific layout to see if I can do it and add tabs. So far, I've been able to center stuff but in a way that I view as weird. I want the h1 to be under the avatar.
I used v-spacer to center things and added tabs that are centered at the bottom
when I use v-slot it aligns everything in the middle.
If it's just the avatar it's perfect.
When I add an h1 under it does not go directly under.
I've been looking at the api and can't figure out.
Here's a link to the codepen https://codepen.io/sanwil9/pen/mYQaRx
<div id="app">
<v-app id="inspire">
<v-app-bar prominent extended
src="https://images3.alphacoders.com/114/114869.jpg"
dark
>
<v-spacer></v-spacer>
<v-avatar
size="90"
>
<img
src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&v=beta&t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
alt="Avatar"
/>
</v-avatar>
<h1>Super Steve</h1>
<v-spacer></v-spacer>
<template v-slot:extension>
</template>
<template v-slot:extension>
<v-tabs centered>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-content>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
<v-card dark color="primary">
<v-card-text class="px-0">12</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 2" :key="`6${i}`" xs6>
<v-card dark color="secondary">
<v-card-text class="px-0">6</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 3" :key="`4${i}`" xs4>
<v-card dark color="primary">
<v-card-text class="px-0">4</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 4" :key="`3${i}`" xs3>
<v-card dark color="secondary">
<v-card-text class="px-0">3</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 6" :key="`2${i}`" xs2>
<v-card dark color="primary">
<v-card-text class="px-0">2</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 12" :key="`1${i}`" xs1>
<v-card dark color="secondary">
<v-card-text class="px-0">1</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Help me align the h1 under the gravatar. I want it to be aligned.
Within the <v-app-bar> you can include the following:
<v-container>
<v-layout row>
a spacer, the avatar, and another spacer
</v-layout>
<v-layout row>
a spacer, the <h1>, and another spacer
</v-layout>
</v-container>
the template for the extension
This will insert a grid which will allow you to turn the single container of default content into two separate rows.