There are two buttons and I want to place them in the middle, but it always appears in the right section as the picture.
How can I solve the problem?
Home.vue:
<template>
<v-container>
<v-row>
<v-col>
<v-btn
large
router
to="/viewRecipes"
class="red accent-4 btn-style text-sm-right text-xs-center"
>Explore Recipes</v-btn
>
</v-col>
<v-col>
<v-btn
large
router
to="/createrecipe"
class="red accent-4 btn-style text-sm-right text-xs-center"
>create Recipes</v-btn
>
</v-col>
</v-row>
</v-container>
</template>
<style scoped>
.btn-style {
color: aliceblue;
}
</style>
Your question is somehow unclear, but there are two options what do you want to achieve:
Center buttons inside columns
<v-container>
<v-row>
<v-col class="text-center">
<v-btn large
router
to="/viewRecipes"
class="red accent-4">
Explore Recipes
</v-btn>
</v-col>
<v-col class="text-center">
<v-btn large
router
to="/createrecipe"
class="red accent-4">
Create Recipes
</v-btn>
</v-col>
</v-row>
</v-container>
Center buttons on the page. In order to do so you need to modify your layout a bit and place your buttons inside one column
<v-container>
<v-row>
<v-col class="text-center">
<v-btn large
router
to="/viewRecipes"
class="red accent-4">
Explore Recipes
</v-btn>
<v-btn large
router
to="/createrecipe"
class="red accent-4">
Create Recipes
</v-btn>
</v-col>
</v-row>
</v-container>
Related
I am trying to use Vuetify components to achieve an effect on some v-img thumbnails and I am failing to do so. My images are setup as follows:
<v-row class="fill-height pa-5"
align-content="center"
justify="center">
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc1"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc2"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc3"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc4"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
</v-row>
I have these aligned horizontally in a row with columns and I am trying to have it so that when i over over each v-img they dim separately and a white solid v-button will appear in the center which I will assign a link/text too. What is the best way to do this as the hover component seems to lack dimming properties.
I don't think you are going to get this straight out the box but you don't need to do much more to get the result you want.
Out-the-box...
Use the Hover component to trigger an event and use the slot (boolean) value to toggle CSS class(es).
Template
<v-hover v-slot="{ hover }">
<v-card :class="{ 'on-hover': hover }">
// ...
</v-card>
</v-hover>
Custom...
Then add some scoped styles. The following is just a quick example but you can style however you like.
Styles
.v-image {
transition: filter .4s ease-in-out;
}
.v-card:hover .v-image {
filter: brightness(25%);
}
Example: https://codepen.io/alexpetergill/pen/NWBadjV
Docs: https://vuetifyjs.com/en/components/hover/
API: https://vuetifyjs.com/en/api/v-hover/#slots
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>
i have made a card for sign in and there are no colours on any of the created components. the bottom of card consitst of two button but even those colors are not visible. i have attached the template section of my code. even the blue color of text fields is not visible. what can be the possible error?
<template>
<div>
<v-container>
<v-layout wrap>
<v-row>
<v-col cols="5">
<v-img
src="https://image.freepik.com/free-vector/programmer-working-flat-style_52683-15041.jpg?w=740"
width="500"
height="400"
></v-img>
</v-col>
<v-col cols="7" align-self="end">
<v-flex sm12 md-8 offset-md3>
<v-card elevation="6" width="700">
<v-card-title>
<v-layout align-center justify-space-between>
<h3 class="headline">Sign In</h3>
</v-layout>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<p>Sign in with your username and password:</p>
<v-text-field
autofocus
label="Email"
v-model="email"
type="email"
></v-text-field>
<v-text-field
outline
hide-details
label="Password"
type="password"
v-model="password"
></v-text-field>
</v-card-text>
<br />
<v-divider></v-divider>
<v-container class="px-5" >
<v-checkbox
class="pl-1"
dense
label="Remember Me"
></v-checkbox>
</v-container>
<v-card-actions>
<v-btn class="green--text" color="info" flat to="/forgotdialogue">
Forgot password?
</v-btn>
<v-spacer></v-spacer>
<!-- <landingpage :username="username"></landingpage> -->
<v-btn #click="signUp" color="info">
<v-icon left>mdi-lock</v-icon>
Signup
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-col>
</v-row>
</v-layout>
</v-container>
</div>
</template>
Got it
i just had to change my App.vue file.
in App.vue I included the code in between v-app tags. After this all the colors were restored. Read about it here in this vuetify page https://vuetifyjs.com/en/components/application/
I have a tiny project that I am building using vuetify 2, but the issue I am coming across is in a col with width 7, all my cards are showing up vertically, instead of a horizontal overflow.
What I am hoping to achieve is that the cards are vertical to each other by counts of five, with overflow moving to the second line.
My row arrangement is row > col2 col7 col3 /row. I am not using a v-container because it seems to put a container in the middle and not take up the whole screen.
I have tried using the flex-wrap, flex-column, flex-row etc class based on the vuetify docs, but that doesnt seem to change anything. Most of the examples that I found regarding this is for vuetify 1, and the component structure is different.
Codesandbox
App.vue
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col fluid cols="2"></v-col>
<v-col fluid cols="7">
<HelloWorld v-for="c in 10" :key="c" />
</v-col>
<v-col fluid cols="3"></v-col>
</v-row>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>
HelloWorld.vue
<template>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
What I have at the moment is this: The arrows are showing how I would like the successive card to be next to the card and so forth.
If you want to ignore row wrap you can just add .flex-nowrap class:
<v-row class="flex-nowrap">
Update
I get it. You paste card inside of col. My bet.
You just can do this:
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col cols="2"></v-col>
<v-col cols="7">
<v-row no-gutters>
<v-col v-for="c in 10" :key="c" cols="4">
<HelloWorld/>
</v-col>
</v-row>
</v-col>
<v-col cols="3"></v-col>
</v-row>
</v-app>
</template>
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>