I want to remove icon in the v-expansion-panels.
and here is my codes in Vuejs
<v-card-text style="height: 300px;">
<v-card class="mx-auto mt-5" max-width="500" flat>
<v-row justify="center">
<v-expansion-panels popout>
<v-expansion-panel
v-for="(item,i) in 9"
:key="i"
>
<v-expansion-panel-header>Item</v-expansion-panel-header>
</v-expansion-panel>
</v-expansion-panels>
</v-row>
</v-card>
</v-card-text>
I tried these to remove icon..
.theme--light.v-expansion-panels .v-expansion-panel-header .v-expansion-panel-header__icon .v-icon {
color: white !important;
}
.mdi-chevron-down::before {
display: none !important;
}
.v-expansion-panel-header__icon {
display: none !important;
}
.v-icon notranslate mdi mdi-chevron-down theme--light {
display: none !important;
}
but none of them works.
how can I remove the icon? please help me..
Set the expand-icon prop of v-expansion-panel-header to an empty string
<v-expansion-panel-header expand-icon="">Item</v-expansion-panel-header>
Demo
Just add hide-actions to the panel-header
https://vuetifyjs.com/en/api/v-expansion-panel-header/#props
Just add the props: disable-icon-rotate
<v-expansion-panel-header disable-icon-rotate>Item</v-expansion-panel-header>
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.
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.
All I want is to have a carousel-item that contains two images. At the very least I want two carousels side by side. Any ideas since wrapping the carousels in row-cols or simply trying a sheet containning two images in each carousel item does not work.
EDIT : Notice how the component surpasses the right edge of the app drawer (should not happen and also on transition the background of the carousel flashes black. Ideally I get a carousel that is responsive with the two images inside transitionning without flashing black.
<template>
<v-container>
<v-row>
<v-col cols="1">
<v-btn icon large #click="toggle">
<v-icon>{{ playIcon }}</v-icon>
</v-btn>
</v-col>
<v-col>
<v-slider
color="light-green"
thumb-color="light-green accent-4"
thumb-size="30"
track-color="light-green accent-4"
v-model="run"
max="19"
:tick-labels="ticksLabels"
tick-size="6"
ticks/>
</v-col>
</v-row>
<v-carousel
:cycle="playPause"
hide-delimiters
interval=3000
v-model="run"
height="700px"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
transition="fade-transition"
reverse-transition="fade-transition"
v-for="(item,i) in items"
:key="i"
>
<v-row>
<v-card width="49%">
<v-img contain :src="item.avg"/>
</v-card>
<v-spacer></v-spacer>
<v-card width="49%">
<v-img contain :src="item.std"/>
</v-card>
</v-row>
</v-carousel-item>
</v-carousel>
</v-container>
</template>
You can fix the black flashing by adding these two props to the v-carousel
:dark="$vuetify.theme.dark"
:light="!$vuetify.theme.dark"
And to fix the scope of the component you can add this style.
<style scoped>
.v-carousel .v-window-item {
position: absolute;
top: 0;
width: 100%;
}
.v-carousel-item {
height: auto;
}
</style>
I wanna make the image has an black overlay and the title "Top 10 Australian beaches" won't be affected by the black overlayed image.
template.vue
<template>
<v-card
class="mx-auto"
max-width="400"
>
<v-img
class="white--text align-end"
height="200px"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
>
<v-card-title>Top 10 Australian beaches</v-card-title>
</v-img>
<v-card-subtitle class="pb-0">Number 10</v-card-subtitle>
<v-card-text class="text--primary">
<div>Whitehaven Beach</div>
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
<v-card-actions>
<v-btn
color="orange"
text
>
Share
</v-btn>
<v-btn
color="orange"
text
>
Explore
</v-btn>
</v-card-actions>
</v-card>
</template>
The result of the code :
I can come up with two option:
Add a class to your v-img tag and style it using pseudo-elements:
.your_class:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
If your're using Vuetify version 2.3.0+ you can hack this problem with gradient property. All you need is to provide the same rgba color to v-img tag:
gradient="rgba(100,100,100,.8), rgba(100,100,100,.8)"
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.