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>
Related
The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.
I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.
Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.
I tried wrapping v-app-bar with v-container:
This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.
Is there a native way to do this or will I need to get creative?
<template>
<v-container>
<v-app-bar
color="indigo accent-4"
dense
flat
dark
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</template>
Similar question but no answers. Problem with placing v-app-bar content in container?
Found a workaround in the interim, not sure how clean it is:
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
In case you want the v-app-bar to be fixed to the top of the page, I solved this by wrapping a v-app-bar inside a v-container inside another v-app-bar:
<template>
<v-app-bar app fixed dense color="grey lighten-4" elevation="1">
<v-container>
<v-app-bar dense elevation="0">
<v-app-bar-title nuxt href="/">
My Title
</v-app-bar-title>
</v-app-bar>
</v-container>
</v-app-bar>
</template>
As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...
<template>
<v-dialog :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For me this is work (Vuetify version 2)
Add scrollable prop in <v-dialog>
inside <v-card> use <v-card-title> instead of <v-toolbar>
then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element
<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:
.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}
You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.
In my case, fixed title was not working until I did not wrap my div in v-card-text
<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
PS. the Vuetify semantic is very important for correct working all of features (ex. using v-card-actions in v-card instead of custom div)
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>
I'm trying to replicate the layout of a Flexible toolbar and card toolbar as shown in https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card, but I want the card content grow up to full screen height, and then scroll its content.
I could make it scroll here https://codepen.io/anon/pen/rvwNbr, but I had to set a fixed max-height in pixels:
<v-card-text style="max-height: 250px; overflow-y: scroll">
what I wanted is that the card could grow up to full height before starts scrolling. then, I tried wraping the external v-card in a v-content with "fill-height" attribute, according to https://vuetifyjs.com/en/layout/grid but it didn't work
any suggestions?
This isn't the best solution for sure but it might nudge you in the right direction.
A solution using all flexboxes would be way better but I can't seem to get it to work with flexboxes..
<template>
<v-app id="inspire">
<v-card flat class="fill-height">
<v-toolbar color="primary" dark extended flat>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-toolbar>
<v-card class="mx-auto card--flex-toolbar" max-width="700">
<v-toolbar flat>
<v-toolbar-title class="grey--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text class="card-body">
<p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
</v-card-text>
</v-card>
</v-card>
</v-app>
</template>
<script>
export default {};
</script>
<style>
.card--flex-toolbar {
margin-top: -62px;
}
.card-body {
overflow-y: auto;
max-height: 85vh;
}
</style>
Check out the layout.vue in the codesandbox here. The v-card-text will go down to the bottom of the screen and then starts scrolling the content. Feel free to change the value in the v-for loop and watch the card grow/shrink.
I'd like to have two floating action buttons in the lower right corner, one above the other (like google maps).
Currently I'm using a fixed style bottom offset to do this on one of the buttons, like so:
<v-btn fab fixed bottom right>...</v-btn>
<v-btn fab fixed bottom right style="bottom: 90px">...</v-btn>
...to achieve this, but I don't want to hardcode the 90px, I'd really rather say "I want two Floating Action Buttons, one vertically above the other".
Is there a vuetify-way to go about this?
You can put them inside another element with a bit of custom CSS for positioning:
<template>
<v-layout column class="fab-container">
<v-btn fab>
<v-icon>add</v-icon>
</v-btn>
<v-btn fab>
<v-icon>remove</v-icon>
</v-btn>
</v-layout>
</template>
<style>
.fab-container {
position: fixed;
bottom: 0;
right: 0;
}
</style>
https://codepen.io/anon/pen/KyJzQP?editors=1100
You can apply a class tag like this:
<template>
<v-card>
<v-card-text style="height: 100px; position: relative">
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small>
<v-icon>mdi-bookmark-outline</v-icon>
</v-btn>
</v-fab-transition>
<v-spacer />
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small class="mr-6">
<v-icon>mdi-heart-outline</v-icon>
</v-btn>
</v-fab-transition>
</v-card-text>
</v-card>
</template>