I would like to have a floating at the bottom right side of the image inside a card.
here's my sample https://codepen.io/chunallen/pen/bPGJOP?editors=1000
The problem here is the button is behind of the v-card-title
Expected Result
If you add style="height: 100px; position: relative" to v-card-title, move the btn beneath the h3, and change bottom to top then it'll work.
<v-card-title primary-title style="height: 100px; position: relative">
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<v-btn color="pink" dark small absolute top right fab>
<v-icon>add</v-icon>
</v-btn>
</div>
</v-card-title>
Sample
A bit late to the party, but for people with the same issue:
a button placed inside v-img will cut the button of.
a seperate card around the image and the button in the card (after the image) does the trick
Related
My card hights is not displaying consistently as I intended. I was thinking to set the max-height to my v-card-text
<v-col cols="3" v-for="note in notes">
<v-card :loading="loading" max-width="374">
<template slot="progress">
<v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
</template>
<v-img height="250" :src="note.img"></v-img>
<v-card-title>{{ note.name }}</v-card-title>
<v-card-text height="200px">
<div>{{ note.description }}</div>
</v-card-text>
<v-card-text>
<v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
<v-chip v-for="tag in note.tag">
{{ tag }}
</v-chip>
</v-chip-group>
</v-card-text>
</v-card>
</v-col>
I see no effect
Any suggestions for me ?
You can achieve it with:
.v-card-text {
height: 200px;
overflow-y: auto;
}
If you don't want a scrollbar and you're fine with the text being cropped:
overflow-y: hidden;
Shortcomings:
.v-card-text will always have this height, even if all items on a row end up not using all of it
you might want to customise the scrollbar appearance on browsers which display a wide scrollbar (17px) on desktop (e.g: Chrome).
Alternatively, if you want the tallest card in each row to set the height (resulting in rows with cards of different heights) and not have any overflow, but have some white space on some cards instead, I can help you achieve it if you create a runnable snippet, so I can test. In principle, you need to give the card container display: flex; flex-direction: column; and give .v-card-text { flex-grow: 1 }.
In practice, the card might have more than one wrapper, which is why I need to see a live snippet, if you're interested in this solution.
Context:
Hi, I am trying to use fabricjs canvas within vuetify and make it look responsive in all the screens.
But currently, I am facing an issue where the canvas is not re-sizing based on card,it overflows the card instead.
I have tried using v-responsive but it does not apply the aspect ratio to canvas, could be, the way I am using it is not the right way.
Any suggestions will be helpful.
This is what is happening now
This is what i am trying to achieve
Structure
Mock:
Code
This is what i have tried till now.
<v-layout>
<v-flex xs12>
<v-container class="red" fluid>
<v-layout row wrap align-center justify-center>
<v-flex xs3 sm3 md3 class="ma-2" class="purple">
<v-card flat tile class="yellow">
<v-card-title
id="fabric-canvas-wrapper"
class="green pb-0 justify-center"
>
<v-responsive aspect-ratio="4/3" class="mx-auto px-3">
<canvas id="c"> </canvas>
</v-responsive>
</v-card-title>
<v-card-text class="blue text-xs-center py-0">
<p class=".body-2 pa-2 text-truncate">Kangaroo Valley Safari</p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
https://codepen.io/adatdeltax/pen/OJWOPBo
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
Source
The width/height of the canvas element are different from the width/height of the canvas element's bitmap. This means that you can use only CSS styles to fix this problem.
canvas {
width: 100%;
height: 100%;
object-fit: cover;
}
Example
If you want to maintain the aspect ratio you can use the padding trick.
.canvas-container {
width: 100%;
padding-top: 100%; // for 1:1 ratio
}
Example
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
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
Good afternoon!
I would like a help to adjust the size of the block where the device, preferably I would like the box to be X px size or something like that. But you have other solution, I would want to see. I'm using vuetify.
enter image description here
<template v-slot:item.device="{ item }">
<v-chip>
{{ item.device }}
<v-icon small right #click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
</v-chip>
</template>
Add a class to the v-chip and wrap item.device in a span.
<v-chip class="short">
<span>{{item.device}}</span>
<v-icon small right #click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
</v-chip>
Then add css, where the v-chip class has the width and the span will ellipse.
.short{
width:100px;
}
.short span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
codepen example