So i have been attempting to create a V-Card in vuetify with a specific layout. The top part of the card will vary in size and therefore I need to be able to align the bottom part of the card to the bottom.
So i've tried to do the following code here which should allow the first part to "grow" to fill the height and then the second part to "shrink" and stay at the bottom...
However, no success.. I probably just have done something sligthly wrong here but I'm pulling out my hair...
Here is my code:
<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
<v-flex grow>
{{ skinName }}
<v-img :src="skinImage" />
</v-flex>
<v-flex shrink>
<v-chip
class="ma-2"
color="indigo"
text-color="white"
>
<img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
</v-chip>
</v-flex>
</v-layout>
</v-container>
As you can see from my image, the blue "coins" should all align at the bottom in the same place no matter how big the text is above it!
Let me know if you need any more information.
Your container is not filling the height of the card, so there is no 'empty space' for the flexbox to redistribute. You can use the fill-height attribute on both the layout and the container element to make sure it stretches.
Related
Overflow hidden not working. It creates another scroll bar like in the image
I copied the code directly from Vuetify and tried it in code pen and the results were the same.
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>`enter code here`
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)
I would guess the vuetify docs have this so the examples work on their own site.
This is happening for two reasons-
Outer Scrollbar comes from html.
bcz your contents like- v-sheet, v-container exceed your screen height
Inner Scrollbar is for v-sheet
bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.
There is no fixed height of v-card, it's flexible to it's content. So,
don't add overflow-hidden class to it. You should hidden in any of
html or v-sheet
This should be a simple fix but not sure where to start.
I have..
<template>
<div class="mx-5 mb-5 Weapons">
<h1 class="green--text">Weapons</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in assaultrifles" :key="weapon.weapontype">
<v-card class="text-md-center ma-3 black">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3">View Weapons</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I then have data in arrays with images and "titles" for these cards. I have about 8 cards , each representing its own "category" which is represented by the "title" data in my array.
What I am trying to do is make it so if I click on a card with the category/title "Handgun" or click on a card "rifle", I will be routed to a new page where I list out items for that specific category.. however I am not sure where to start because I am simply passing {{weapon.WeaponType}} into 1 card object, and then using 1 button ( with the text "view weapon"), across all the cards.
My understanding is that if I make a route for the 1 button I made, then the route will be the same for all buttons, despite the cards representing its own category, which would be bad because I don't want to see "handguns" when I click on the "shotgun" card’s button.
I want to somehow keep my current structure ( using 1 object and passing a loop of data ) and 1 btn, so that my code stays around the same length/structure).
Thanks for reading.
You will need additional property in your objects - for the route of the button:
<v-btn
flat
class="green black--text ma-3"
:to="weapon.route"
>
View Weapons
</v-btn>
The weapon.route can be a string or an object.
Another option is to provide just the category IDs and then
<v-btn
flat
class="green black--text ma-3"
:to="{name: 'weaponItems', params: {categoryID: weapon.categoryID}}"
>
View Weapons
</v-btn>
I have vuetify calendar component. This calendar (only on month type) is too big for mobile screen.
Helper images: image 1 image 2
this my code:
<v-layout align-space-around
justify-center
row wrap
column
fill-height>
<v-flex xs12>
<v-card flat>
<v-calendar
ref="calendar"
v-model="start"
:type="type"
:end="end"
:now="today"
:value="today"
ma-0
locale
#click:date="clickDate">
...some calendar code here...
</v-calendar>
</v-card>
</v-flex>
</v-layout>
The v-card element is rendering correctly, fits for device, but calendar takes more space (for width) that his parent (v-card).
I'll be glad for some help with that.
I am trying to get rounded corners on a v-card as I can get on a btn, but it does not seems to be possible ?
I used
<v-card round class="elevation-0">
Here is my template
<template>
<section id="section2">
<v-parallax :src="require('../../assets/images/members.jpeg')" height="380">
<v-layout column align-center justify-center>
<v-flex xs12 sm12 md8>
<v-card round class="elevation-0">
<v-card-title primary-title class="layout justify-center">
<h3 v-html="$t('lang.views.home.section4.thank_you')" ></h3>
</v-card-title>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-parallax>
</section>
</template>
v-card has rounded corners by default. It does not provide a prop named round to make it have more rounded corners.
If you want to have more rounded corners as compared to the default then add a custom css class to v-card
<v-card class="rounded-card">
css
.rounded-card{
border-radius:50px;
}
Here is a codepen
I would like to update Vamsi Krishna's answer. Vuetify now provides since v2.3 border utilities to quickly style the border-radius of any element.
To minimize custom CSS and make your Vue app more consitent, you may now use .rounded-xs, .rounded, .rounded-lg or .rounded-xl classes as specified in the docs:
<v-card class="rounded-lg">
You can use:
<v-card class="rounded-xl">
For round card in Vue.js:
Other Class{
.rounded-0
.rounded-sm
.rounded-md
.rounded-xl
.rounded-pill
.rounded-circle
}
Reference Link: https://vuetifyjs.com/en/styles/border-radius/#usage
v-card has a prop called shaped which applies border radius to top left and bottom right, but we can add our own border radius like this
<v-card shaped class="rounded-corner"></v-card>
CSS
.rounded-corner{
border-radius:20px;
}
You can use the border radius to style border-radiuses of any element. In Vuetify's official documentation they show its use in divs.
For instance, the below code gives you a rounded circle.
<div class="pa-7 secondary rounded-circle d-inline-block"></div>
Here's the documentation link: https://vuetifyjs.com/en/styles/border-radius/#removing-border-radius
Note: Using Vue.js and Vuetify.js for functionality and styling
I have card components dynamically generated with v-for, and I want to display them in 1/3/4 card(s) in a row depending on screen size (sm/md/lg). When I place them in Vuetify's grid system, with v-flex and v-layout elements, the cards are minimized, instead of moving to the second row.
Is there another way to go about this?
<v-content>
<v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
<v-layout >
<v-flex md6 lg6>
<img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
</v-flex>
<v-flex md6 lg6>
<v-card-title class="headline pl-0">{{company.name}}</v-card-title>
<article class="text-md-left text-lg-left">
<v-btn #click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
<v-btn #click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
<v-btn #click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
<v-btn #click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
<v-btn #click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
</article>
</v-flex>
</v-layout>
</v-card>
</v-content>
For a visual, this codepen shows the images width size decreases (but height size stays the same) - https://codepen.io/johnjleider/pen/aLXBez?editors=1111
The accepted answer did not work for me with v2 of Vuetify.
Now we can use <v-col> and you would do something like below.
<v-row>
<v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
<my-component :my-data="something" />
</v-col>
</v-row>
Where cols="12" is the same as xs="12" and the column would take up the full 12 spaces.
The sizing scales up starting with the smallest screens. Then on small screens each column would take up 4 spaces resulting in 3 columns and then for medium and larger screens use 3 spaces resulting in 4 columns.
|__|__|__|__|__|__|__|__|__|__|__|__| 12 spaces in the grid
|-----------------------------------| <-cols=12 (1 column)
|--------|--------|--------|--------| <-sm=3 (4 columns)
|-----------|-----------|-----------| <-md=4 and larger (3 columns)
The <v-flex> grid maxes out at 12. So if you set xs12 (extra small breakpoint) on the <v-flex xs12> it will take up all of the grid width until it hits the next breakpoint (If you don't set another breakpoint the lowest one will be applied to all screen widths). So then set <v-flex xs12 md6>, now when you hit the medium breakpoint each card will take up 6 grid spaces, which will allow you to have 2 cards side by side. Setting lg3, will allow you to fit 4 cards in the same space.
You can see it working in this modification to your example
https://codepen.io/twandy/pen/JrxamB?editors=1001