The docs at https://vuetifyjs.com/en/components/application/#application-components mention that v-navigation-drawer can be configured to appear below (instead of next to) v-app-bar but they don't seem to explain how to actually do that.
Here's the layout I'm looking for (v-app-bar spanning the whole width of the window, and v-navigation-drawer sitting below v-app-bar):
How do I configure v-navigation-bar to render like that?
My current code looks like this:
<v-app>
<v-system-bar app height="30" color="primary">The system bar</v-system-bar>
<v-app-bar app color="secondary" dense dark>
The application bar
</v-app-bar>
<v-navigation-drawer app>
<p>Navigation drawer</p>
</v-navigation-drawer>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>The footer</v-footer>
<v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>
And it renders like this (note the navigation-drawer being next to, instead of below the application bar)
You need to add clipped-left prop to your v-app-bar and clipped prop to your v-navigation-drawer.
Related
Im trying to add navigation panel to v-card but somehow when adding the navigation drawer, everything that is in the v-card is being pushed down- out of the card.
<v-card flat outlined>
<v-navigation-drawer v-model="drawer"
:mini-variant.sync="mini"
permanent>
<v-row>
<v-btn class="float-right" icon #click.stop="mini = !mini">
<v-icon color="black">mdi-chevron-left</v-icon>
</v-btn>
</v-row>
<p>
<v-card v-if="!mini">
TEST
</v-card></p>
</v-navigation-drawer>
<v-row dense>
<v-col cols="12">
<PlotCard
style="min-height: 350px"
:value="1837.32"
:percentage="3.2"
:loading="isLoading1"
percentage-label="vs last week"
action-label="V2"
></PlotCard>
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<table-card class="h-full" label="Recent Orders" />
</v-col>
</v-row>
</v-card>
I've recreated the problem here https://codesandbox.io/s/vuetify-playground-lxq25?file=/src/components/ExampleComponent.vue:38-55
As you can see navigation drawer is in the v-card but other cards are being pushed outside.
Ultimately I want to use the right attribute of navigation drawer in Vuetify to have in on the right but even normal one ins not working. Any idea why this might be happening?
EDIT: Adding absolute makes the navigation-drawer appear as overlay, but I was trying to make it appear form the right and "squeeze" the content of the card to the left.
vuetify have a layout system. for now you have content and navigation drawer, and the navigation drawer dont act right because it doesnt know where it belongs. you have to push your content to v-main(vuetify content layout component) and by passing app prop to navigation drawer you tell its part of layout and it is sidebar. more info:
https://vuetifyjs.com/en/components/application/#default-application-markup .
and pass right to push navigation to right. demo: https://codesandbox.io/s/vuetify-playground-forked-qjjnp?file=/src/components/ExampleComponent.vue
I use Vuetify in my webapplication. The whole webapplication is responsive.
I have the problem that on smaller screens (Smartphone, Pad) I can zoom out of the website which means that I have a white space on the right of my website.
I don't know how this can happen and it is in every single page of my web application like that. What can I do that I use from beginning the whole space and the user can not zoom out from the website and gets this white space on the left?
Below a short example:
<template>
<v-app>
<v-main>
<v-container>
<v-row justify="center" align="center">
<v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
TEST_COL
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({
}),
}
</script>
<style>
</style>
Maybe the problem is in the App.vue file but I don't see any problem there. To be sure I post the app.vue below:
<template>
<v-app>
<Navbar />
<v-main>
<router-view></router-view>
</v-main>
<Footer />
</v-app>
</template>
I put two screenshots below so you see what i mean.
Thanks!
Chris
I got the answer. I used the <v-navigation-drawer> provided by Vuetify to create a drawer object. I used the following options:
<v-navigation-drawer v-model="drawer" absolute temporary right>
But absolute means it "Applies position: absolute to the component." which means that it takes extra space in the website. The option must be "fixed" instead of "absolute" then it works.
The good settings are:
<v-navigation-drawer v-model="drawer" fixed temporary right>
Now the drawer opens on the right side of the website (better for smartphones) and it doesn't take any absolute space!!
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
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>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
Overflow hidden not working. It creates another scroll bar like in the image
I copied the code directly from Vuetify and tried it in code pen and the results were the same.
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>`enter code here`
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)
I would guess the vuetify docs have this so the examples work on their own site.
This is happening for two reasons-
Outer Scrollbar comes from html.
bcz your contents like- v-sheet, v-container exceed your screen height
Inner Scrollbar is for v-sheet
bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.
There is no fixed height of v-card, it's flexible to it's content. So,
don't add overflow-hidden class to it. You should hidden in any of
html or v-sheet
I have a vuejs running with a simple config and I am using vuetify for the UI
<template>
<v-app fill-height >
<v-navigation-drawer right temporary v-model="sideNav">
</v-navigation-drawer>
<v-toolbar dark class="deep-orange accent-3">
<v-toolbar-title >
<router-link to="/">Example</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
</v-toolbar>
<main>
<v-container >
<router-view></router-view>
</v-container>
</main>
<v-footer class="indigo">
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
<template>
Let's assume that I have two paths : '/' and '/profile'.
Everything is rendering fine when the user lands on the '/' page (which is the default landing page), however there are problems when the user is on the '/profile' page and then refreshes it.
What is happening is that anything under the <view-router> get's lost. So the result is that the footer is not rendered., but anything above the <vue-router> is render correctly
If the user then navigates to the '/' page the footer is rendered, and will render if he then navigates back to '/profile'
What could be cause such behavior ?