I am new to vue and vuetify and just use v-card tag from vuetify.
I want that the v-card have 100% width, (without left or rigth side spacing)
Is there any configuration that can be made on these initial tags ?
<v-layout
column
justify-center
align-center
>
<v-flex
xs2
sm2
md2
>
How can it ben done ?
I try :
.section{
padding-top: 100px;
padding-bottom: 100px;
width:100%;
}
and :
<div class="section section_dark">services</div>
But still there is some left and right space for this div.
I think you may be able to use the spacing helper classes.
Look here: https://vuetifyjs.com/en/framework/spacing
You can add this to your div, I believe:
<div class="section section_dark ma-0 pa-0">services</div>
You can try row instead of column :
<v-layout
row
justify-center
align-center
>
and use special props for card :
<v-card
min-width="100%"
>
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
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've moved my nav panel into a v-navigation-drawer. I want to remove the scrollbar as there is content I want to always be visible. I've tried the various tips but the scrollbar is still there. How can I hide or get rid of it?
<v-navigation-drawer
v-model="mainNavDrawer"
fixed
app
clipped
enable-resize-watcher
width="475"
class="pa-0"
mobile-break-point="1600"
><v-layout class="primary ma-0 pa-2 pt-1 d-xl-none">
<v-toolbar-title class="pa-1 white--text font-weight-bold"
>Knight Shop Invoice EasyPay</v-toolbar-title
>
<v-spacer></v-spacer>
<v-btn
x-small
class="mt-2 pa-3"
color="primary lighten-5"
dark
outlined
#click.stop="mainNavDrawer = !mainNavDrawer"
>
<v-icon dark left> mdi-arrow-left </v-icon>Close
</v-btn></v-layout
>
<v-container fluid class="py-0">
<v-row>
<v-col class="px-0 py-0" sm="12">
<v-container class="pt-0">
<v-row>
<v-col sm="12" class="px-2">
<TogglePOType />
</v-col>
</v-row>
<transition name="slide-fade">
<v-row v-show="this.selectedInvoiceStatus === 'needapproval'">
<v-col sm="12" class="py-0">
<RegionGraph :height="200" />
</v-col> </v-row
></transition>
<v-row>
<v-col sm="12" class="pa-0 pt-2">
<SelectVendors />
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</v-navigation-drawer>
. . .
<style scoped>
.v-navigation-drawer__content {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
</style>
I've tried applying overflow: hidden to the nav drawer and to each elment below but still no joy.
The proper class declaration that worked for me is
<style scoped>
v::deep .v-navigation-drawer__content {
overflow: hidden
}
</style>
Above is all I did
v::deep allows class to reach child components even with scoped property on
If you don't want to use v::deep, try removing the scoped property in your style tag
<style> <--- note without the scoped property
the scoped property prevent any class delcarations from reaching other components
In this case, since vuetify components are considered as separate component
scope tag will prevent your class delcaration take effect
Currently using vuetify 2.6.1
Note that the above works in removing scroll bar, but also disable user from scrolling with mouse wheel, so I resorted to method below.
<style scoped>
::v-deep ::-webkit-scrollbar {
width: 0
background: transparent
}
Doing this allows hiding of scroll bar while still enables scrolling
</style>
Please refer to here for detailed description on why.
Hide scroll bar, but while still being able to scroll
Try this! This is work for me.
.v-navigation-drawer__content::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px #5d5d5d;
background-color: #5d5d5d;
}
.v-navigation-drawer__content::-webkit-scrollbar{
width: 0px;
}
.v-navigation-drawer__content::-webkit-scrollbar-thumb{
-webkit-box-shadow: inset 0 0 6px #424242;
background-color: #424242;
}
Let me know if you can make it! :)
Do not use 'scoped' in your style tag.
I'm trying to implement transition like here codepen example but using the Vuetify.
I've noticed that adding transition tag before v-flex component destroyed a v-flex order. In this example codesandbox, there are two routes one with transition another one without.
Components have the structure:
<v-container>
<v-layout row wrap pb-2 pt-2>
<!-- is transition group -->
<transition-group name="cards" >
<v-flex xs3
v-for="card in items"
:key="card"
>
<v-layout>
<v-card>
.....
</v-card>
</v-layout>
</v-flex>
</transition-group>
</v-layout>
</v-container>
transition-group renders an actual element: a <span> by default. So there's an extra span between v-layout and v-flex. This cause the flexbox to malfunction.
transition-group has to render something. You could set it to render v-layout instead of span.
BUT, transition-group has a limitation. It can set tag but cannot set props. So, for the row wrap pb-2 pt-2, you gotta add it manually using CSS.
change
<template>
...
<v-layout row wrap pb-2 pt-2>
<transition-group name="cards">
...
</transition-group>
</v-layout>
...
</template>
to
<template>
...
<transition-group name="cards" tag="v-layout" class="manual-v-layout">
...
</transition-group>
...
</template>
<style>
.manual-v-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding-bottom: 8px !important;
padding-top: 8px !important;
}
</style>
and it would work.
Demo: https://codesandbox.io/s/z2z5yoopol
I couldn't get Jacob Goh's answer to work, so i made some adjustments with his answer as inspiration and came up with this as the solution.
<template>
...
<transition-group name="cards" tag="div" class="layout row wrap">
...
</transition-group>
...
</template>
Set the transition-group tag to div and assign the appropriate classes to it.