I'm new to Vuetify. Here i confuse how to remove left and right margin/padding.
Here what I've done:
<template>
<v-app light>
<v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title v-text="title"></v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<v-container pa-0 ma-0>
<nuxt/>
</v-container>
</v-content>
<v-footer :fixed="fixed" app></v-footer>
</v-app>
</template>
Demo
But as you can see, the grey box is still affected by margin/padding. Please help. Thanks.
Related
I'm trying to center my auth component (v-card) horizontally and vertically. I tried all kinds of solutions like justify=center and align=center on the rows, fill-height on the v-container, class="fill-height" on the v-container but its not working. What am I doing wrong here ?
Code :
<script setup lang="ts">
import { useUserStore } from "../../stores/user";
const store = useUserStore();
</script>
<template>
<v-card width="800" >
<v-card-title>
Authentication
</v-card-title>
<v-card-subtitle>
login with username and password
</v-card-subtitle>
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="store.username" label="Username"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="store.password" label="Password"></v-text-field>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import Auth from "../components/auth/Auth.component.vue"
</script>
<template>
<v-container>
<v-row style="border:1px solid red;" fill-height>
<v-col class="d-flex justify-center items-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
<template>
<v-app>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<script setup lang="ts">
</script>
Update
Check this codesanbox I made: https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue
Looks like by just adding the class fill-height to the root container you can center it vertically.
<template>
<v-container fluid class="fill-height">
<v-row style="border:1px solid red;">
<v-col class="d-flex justify-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
The following snippet will center the card vertically in the parent in Vuetify 3:
<v-row align="center" class="fill-height">
<v-col>
<v-card class="ma-3">
...
</v-card>
</v-col>
<v-row>
The footer in this code expands the entire window width. I want it to be the same width as the <v-content>
<v-app>
<v-navigation-drawer permanent app>
</v-navigation-drawer>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer app>
<p>©</p>
</v-footer>
</v-app>
Here is another working example just add inset to v-footer
<v-app>
<v-navigation-drawer permanent app>
</v-navigation-drawer>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer inset app>
<p>©</p>
</v-footer>
</v-app>
You shouldn't use the app prop on the <footer> if you want it to be the same width as the content, you should rather put it inside the <v-content>, and then put the absolute prop, just as the following:
<v-app>
<v-navigation-drawer permanent app>
</v-navigation-drawer>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
<v-footer absolute>
<p>©</p>
</v-footer>
</v-content>
</v-app>
Edit/Approach 2: You can also use the inset prop on the <footer> to make an offset from the navigation drawer, if you want to keep the footer out of the <content>.
<v-app>
<v-navigation-drawer permanent app>
</v-navigation-drawer>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer inset app>
<p>©</p>
</v-footer>
</v-app>
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.
I use v-toolbar but when I scroll down it get disappears. Basically I want to a sticky header.
This is my code basically.
<div id="app">
<v-app>
<v-toolbar dense>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</v-app>
</div>
Edit: Vuetify version 1.5:
You just need to add fixed to your v-toolbar which fixes the position, So:
<v-toolbar dense fixed>
You can see the documentation here
Version 2.0.0
Change from vuetify version 1.5 :
v-app-bar: Brand new component that was created to better scope the functionality of v-toolbar. All existing scrolling techniques and app functionality from v-toolbar has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.
<v-app-bar fixed> would fix the toolbar. Documentation
Try this code.
<v-app id="inspire">
<div
class="hide-overflow"
style="position: relative;"
>
<v-toolbar
color="teal lighten-3"
dark
scroll-off-screen
scroll-target="#scrolling-techniques"
dense
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main id="scrolling-techniques" class="scroll-y"
style="max-height: 625px;">
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</div>
</v-app>
For those who just wants to have a sticky element either above or below,
you might want to try snackbars
<v-snackbar v-model="snackbar" timeout="-1" top app>
jojojojojo asdfjasldf
</v-snackbar>
I'm new to vuetify.js and started playing around with it.
This is my code.
Admin-panel.vue
<v-content class="yellow">
<v-container>
<v-layout>
<router-view></router-view>
</v-layout>
</v-container>
</v-content>
create-user.vue
<template>
<v-container class="red">
<v-layout class="blue">
<v-flex md12>
form
</v-flex>
</v-layout>
</v-container>
</template>
Here I can see v-container element gets the full width available.
What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)
How do I achieve this?
Use the fluid prop:
<v-container
fluid
/>
Codepen.
I was having the same issue.
I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.
Be sure you only have one declared in your app.
Did you try using the margin and padding classes/props?
<v-container class="red ma-0">
or
<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">
for having the full screen only for mobile devices?
The answer posted by #Billial Begueradj is perfect. However, problem may still persist if there's an unchecked v-container tag up the hierarchy.
This will NOT work
<v-container>
<v-container fluid>This will not work</v-container>
<v-container>
In the above code, the inner v-container tag will not achieve full-width because there's another v-container tag up in the hierarchy that is not set to layout in full-width and it'll effectively limit the inner one
This will work
<v-container fluid>
<v-container fluid> This will work </v-container>
</v-container>
Setting both the inner and the outer v-container tags to occupy full width resolves it.
use fluid and remove the padding if any
<v-container fluid class="py-0 px-0"></v-container>
you may try like this
master.vue
<v-app id="app">
<v-navigation-drawer
v-model="drawer"
temporary
absolute
>
<sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-text-field
color="purple"
id="globalSearch"
name="globalSearch"
label="Search"
v-model="globalSearch"
v-validate="'required'"
></v-text-field>
<v-btn to="dashboard" flat>Dashboard</v-btn>
<v-btn to="login" flat>Login</v-btn>
<v-btn flat>Register</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">#{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Eliyas Hossain</strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
category.vue
<template>
<v-card>
<v-card-title>
<div>
<h2 class="pl-2">Categories</h2>
<v-btn #click="dialog = !dialog" color="primary" dark>New Category</v-btn>
</div>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
</v-card>
</template>
so it will take full space in right side.
For anyone using nuxt - make sure you apply the fluid prop to the top level v-container in the layout and not the ones in your page components.
<v-main>
<v-container fluid>
<Nuxt />
</v-container>
</v-main>