I'm trying to build a simple page with Vuetify and Vue.
On this page, I will have a few cards too. So I need this card's width and height fixed.
I need these items inside of the v-card, also scrollable. How can I do that?
<v-container>
<v-col cols="12" sm="16" md="8" lg="4">
<v-card height="720px">
<v-card-title class="unselectable" primary-title>
Card Title
</v-card-title>
<v-spacer></v-spacer>
<v-card-text>
<v-container>
<v-row class="pa-2">
<v-col
v-for="(item, i) in items"
:key="i"
class="d-flex child-flex"
cols="6"
>
<v-card>
<v-img
:src="getImage(item)"
height="130px"
class="grey lighten-2"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
/>
</v-row>
</template>
</v-img>
<v-card-text class="unselectable text-center font-weight-bold">
{{ item.title }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-container>
Try out to add the property overflow-y:auto to the card style like :
<v-card height="720px" style="overflow-y:auto">
Related
I have a card that displays a "toolbar" whenever I hover over it
Reproduction link
<template>
<v-app>
<v-main>
<div class="py-12"></div>
<v-container>
<v-menu open-on-hover location="top" transition="slide-y-transition">
<template v-slot:activator="{ props }">
<v-card v-bind="props" variant="outlined">
<v-card-title>Card goes here</v-card-title>
</v-card>
</template>
<v-card variant="outlined" class="ml-4">
<v-card-actions>
<v-btn icon="mdi-link-variant-minus" size="small" color="error" />
<v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
</v-card-actions>
</v-card>
</v-menu>
</v-container>
</v-main>
</v-app>
</template>
But this "toolbar" should not expand to full width. I want it to be like a tab, e.g.
Adding the d-inline-block helper class to v-card-actions or to its parent v-card didn't help. I'm basically looking for
<div style="background:red">I don't want this</div>
<div style="display: inline-block; background:red; margin-top: 24px">I want this</div>
width: fit-content; for the toolbar parent block might solve it.
I'm trying to fit two v-cols inside of a v-row, one being 2 cols wide and the other 10. The for-loop (or default behavior) of v-cols seems to be causing the v-cards after the first 2 to stick to the left side of the screen, when I'd want to them to keep in the same alignment as the top two cards. The first set of v-cols is a side component, while the second v-col is for a grid.
Is there a way I can make all the v-cards in the grid justify to the right side so that they wouldn't revert back to the left side once the side component ends?
<template>
<div>
<TopNavbar />
<v-app id="bigGrid">
<div>
<v-container>
<v-row class="grey" align-md="right">
<v-col cols="12" sm="12" md="12" lg="2" xl="2">
<v-card class="pa-8" style="height: 30vh" outlined title>
Side Stuff
</v-card>
</v-col>
<v-col
justify="end"
v-for="n in 6"
:key="n"
cols="12"
md="5"
lg="5"
xl="5"
>
<v-card style="height:25vh" class="pa-8" outlined title>
<v-card-title> Category Name</v-card-title></v-card
>
</v-col>
</v-row>
></v-container
>
</div></v-app
>
</div>
</template>
Codepen Link:
My updated code is as follows
<div id="app">
<v-app id="bigGrid">
<div>
<v-container>
<v-row class="grey" align-md="right">
<v-col cols="12" lg="2">
<v-card class="pa-8" style="height: 30vh" outlined title>
Side Stuff
</v-card>
</v-col>
<v-col cols="12" lg="10">
<v-row>
<v-col
v-for="n in 6"
:key="n"
cols="12"
md="5"
>
<v-card style="height:25vh" class="pa-8" outlined title>
<v-card-title> Category Name</v-card-title></v-card
>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</div>
</v-app>
</div>
Main page should be wrapped into another <v-col> component and grid components can go inside it(<v-row> in this case)
justify="end" is applied to component
<v-col cols="12" sm="12" md="12" lg="2" xl="2"> can be minimized to <v-col cols="12" lg="2">. And the samething for <v-col justify="end" v-for="n in 6" :key="n" cols="12" md="5" lg="5" xl="5">
I'm making a simple login and register page with VueJS and Vuetify for a personal project but I can't figure out how to horizontally center a v-card I'm using.
I've been looking for a way but the documentation didn't gave any answers and I couldn't find any questions over here so I decided to ask it. Here's my code:
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo.png')"
class="my-3"
contain
height="200"
/>
</v-col>
<v-col cols="12">
<h1 style="text-align:center">SelliBird</h1>
</v-col>
<v-container fluid>
<v-card style="max-width: 50%;" class="elevation-4 mx-auto" dark>
<v-card-text class="text-center">
<v-col class="mb-4">
<h4 style="text-align:center" v-if="options.isLoggingIn">Log in to your customer portal</h4>
<h4 style="text-align:center" v-else>Crate a new account</h4>
</v-col>
</v-card-text>
</v-card>
</v-container>
</v-row>
</v-container>
</template>
<script>
export default {
data(){
return{
options:{
isLoggingIn: true
}
}
}
}
</script>
And here's a picture of how it looks right now:
Just add margin: 0 auto to the style property of the v-card and that's it.
Is it possible to align element on the same height as the v-card-title in the card component of vuetify?
Currentl when using class="float-right" the element goes to the right but it is line below the title. I would like for it to be at the same level.
Here is the codepen:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="400"
>
<!-- Top row -->
<v-card-title>Cafe Badilico</v-card-title>
<button class="float-right">click me</button>
<!-- End of top row -->
<!-- Put components here -->
<v-card-title >
News
</v-card-title>
<v-list-item dense
>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Header</v-list-item-title>
<v-list-item-subtitle>Subheader</v-list-item-subtitle>
<v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-card-title >
News
</v-card-title>
<v-list-item dense>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title >Header</v-list-item-title>
<v-list-item-subtitle >Subheader</v-list-item-subtitle>
<v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</v-app>
</div>
You can move the button into the title and use the v-spacer component:
<v-card-title>
Cafe Badilico
<v-spacer></v-spacer>
<button>click me</button>
</v-card-title>
https://codepen.io/El_Matella/pen/mdJrKNE
If you don't want it to be part of the title component, you can also use a flex container:
<div class="d-flex align-center justify-space-between">
<v-card-title>
Cafe Badilico
</v-card-title>
<button>click me</button>
</div>
https://codepen.io/El_Matella/pen/ZEGpjEq
I'm Currently working on a very Simple Website with VueJS.
I want to have a Container Floating at the Bottom of the Page, and i know how to do this with normal CSS, but because there are so many options in Vue and Vuetify i think that this Problem should be solveable with some sort of a tag.
My Current code is:
<template>
<div class="content">
<v-container class="test-container" grid-list-md text-xs-center fluid>
<v-layout row wrap>
<v-flex xl12>
<v-card dark color="primary">
<v-card-text class="px-0">Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-around>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-between>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xl12>
<v-text-field v-model="txtRequestText" box label="Test" type="text" prepend-inner-icon="place" append-icon="send" #click:append="sendRequest" #keyup.enter="sendRequest"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
The last v-layout with the Textfield in it is the one that should be Displayed at the very Bottom of the Page.
I already tried using align-end on a v-container as well as setting the height of the container to 100% and then using align-end on one of the layouts, but that did not work at all.
Is there a Best Practice way of doing this, or should i just solve it with normal CSS instead?
-Edit-
Here you also have a working version of it:
new Vue({
el: '#app',
data() {
return {
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.3.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify#1.3.0/dist/vuetify.min.css">
<div id="app" class="content" data-app>
<v-container class="test-container" grid-list-md text-xs-center fluid>
<v-layout row wrap>
<v-flex xl12>
<v-card dark color="primary">
<v-card-text class="px-0">Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-around>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row justify-space-between>
<v-flex xs4>
<v-card dark color="primary">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
<v-flex xs4>
<v-card dark color="accent">
<v-card-text>Test</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xl12>
<v-text-field box label="Test" type="text"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</div>
I would say normal CSS. If you want the container to stay at the bottom I would suggest:
#id {
display: fixed;
bottom: 0;
}