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!!
Related
In order to keep it simple i'm going to post a simplified version of what i need to do.
Assuming I've the following component
<template>
<div style="width: 50vw; height: 40vh;">
<v-container fluid>
<v-row style="background-color: #222222" class="fill-height">
<v-col cols="12" lg="8" xl="8" style="background-color: #ff0000"><h1>Breakpoint: {{$vuetify.breakpoint.name}}</h1></v-col>
<v-col cols="12" lg="4" xl="4" style="background-color: #00FF00"><v-img src="https://picsum.photos/256/256" min-height="256px" min-width="256px" max-height="256px" max-width="256px"/></v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
}
</script>
Here is how it looks like on the browser:
Here is where it starts to break.
I need to have a responsive column that have a inside component with a fixed width and height.
Is there any thing that i can do to solve it?
If you don't specify a number of col widths for the first column it'll automatically try and use all the remaining space. cols="auto" can be used on the second column which will provide enough space for whatever content is inside. Together I believe they will accomplish your desired responsiveness. See this codesandbox as an example. Note the example also uses overflow-wrap: anywhere; on the h1 text to further prevent wrapping columns until absolutely necessary
I am currently getting to know the vue framework with vuetify, and I am running into a couple issues here ... I have laid out a simple layout for the main page, but for whatever reason, the buttons do not fill the full height, and the background color is using (by default) the hover color. this is what it looks like:
The Code:
<template>
<v-app>
<v-app-bar app> </v-app-bar>
<v-main>
<router-view />
</v-main>
<v-bottom-navigation app v-model="value">
<v-btn value="cards" to="/cards">
<span>Cards</span>
<v-icon>mdi-cards</v-icon>
</v-btn>
<v-btn value="decks" to="/decks">
<span>Decks</span>
<v-icon>mdi-mail</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'cards',
}),
}
</script>
it is quite odd that this is happening as the application will randomly fix itself every once in a while when deleting random lines of code, then when I try to change something on the navigation, it will then break again.
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.
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>
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 ?