I have copied the example of Vuetify date picker from the official documentation:
<v-row justify="center">
<v-date-picker v-model="picker"></v-date-picker>
</v-row>
This code gives me the following result:
The desired result:
The DP shows up only when hovering on what looks like an input, The Vuetify version is 2.5.0
This is the app structure:
<template>
<div id="app">
<v-app id="my-app">
<mit-side-bar #sideBarOpened="hover_handler"></mit-side-bar>
<template>
<div class="text-center">
<v-overlay :value="hover" z-index="5"></v-overlay>
</div>
</template>
<v-main style="background: #E5E5E5">
<slot></slot>
</v-main>
<v-footer padless color="#FBFDFF">
<v-col
class="text-center"
cols="12"
style="color: #899BAF"
>
{{ new Date().getFullYear() }} —
Система мониторинга социально-экономического развития АЗРФ
</v-col>
</v-footer>
</v-app>
</div></template>
Short answer
<v-app>
YOUR ORIGIN CODE PASTE HERE
</v-app>
Long answer ->
Vuetify need to follow this structure.
<v-app>
<v-row>
<v-CHOOSE-APP></v-CHOOSE-APP>
</v-row>
</v-app>
As it is mentioned here you must wrap it in a v-app component in order for your application to work properly.
Try like
<v-app id="inspire">
<v-row justify="center">
<v-date-picker v-model="picker"></v-date-picker>
</v-row>
</v-app>
Related
I have an outer Vue template:
<template>
<v-container fluid>
<div>
<v-row>
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
<gokb-reviews-title-card
:id="i.id.toString()"
#keys="addkeyFields"
/>
</v-col>
</v-row>
</div>
</v-container>
</template>
and an inner Vue template (gokb-reviews-title-card)
<template>
<v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name">
<v-card-title primary-title>
<h5 class="titlecard-headline">{{ title.name }}</h5>
</v-card-title>
<v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
<div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
<div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
</v-card-text>
<v-card-text class="flex" v-if="!!title?.history">
<div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
<div class="titlecard-history">{{ title.history }}</div>
</v-card-text>
</v-card>
</template>
The row consists of 3 gokb-reviews-title-cards. I want to have it 4 cards.
I've tried to change it by adding cols="3" to the v-col as discussed in this question. This did not show any effect.
Adding a CSS .grid to the outer-most <div> (discussed here) can change the width of a card, but the maximum number of cards per row stays 3. The row is "half-filled" then. The CSS I tried is:
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};
How can I make the <v-row> contain 4 <v-col>s thet each contain 1 card?
I think it is because you have md="4" in
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
if you change it to 3 it should work since it's a 12-based grid
<v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">
in addition, your cols="3" might not be working because it only applies to widths narrower than the md breakpoint.
If you are using responsive layouts keep the md, but also define other widths, either through cols or xs. Otherwise just use cols
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've been trying to change v-select text colour for the label and items but can't find the prop to do that, I can change the background-color but not the label or text items inside the v-select. Sample code below
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col
class="d-flex"
cols="12"
sm="6"
>
<v-select
:items="items"
label="Standard"
background-color="#000000"
color="#ffffff"
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
You could use item slot to customize the label rendering :
<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
<template #item="{item}">
<span style="color:white; background:blue">{{item.name}}<span>
</template>
</v-select>
I'm trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters>
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here there's the codepen
How can I align those two columns?
Add align prop to the row component with center as value :
<v-row no-gutters align="center">
In order to do that, you can add class="d-flex align-center" to the v-row
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters class="d-flex align-center">
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here's the codepen
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>