Comments (4)
@reslear You can bind class with style "overflow: visible!important;" to your data, responsible for displaying v-show-slide. Refering to examples for this component:
<ul id="features" v-show-slide="featuresOpen" class="features" :class="{ overflowed: featuresOpen }">
and in styles:
.features.overflowed { overflow: visible!important; }
BUT! it will immideately display content as soon as you press ul.features
from v-show-slide.
@stayacid is correct, overflow: hidden
is needed for this to work correctly. That said, it is a fair point that I don't think overflow: hidden
is needed once the item is open. I can look into changing this. In the meantime you could work around this issue by using the @slide-open-end
and @slide-close-start
events to add/remove a CSS class that overrides the overflow
property. Something like:
.overflow-visible {
overflow: visible !important;
}
from v-show-slide.
@phegman Yes, you're absolutely right. But, in my case, there is a problem if i have slide opened from the beginning, when page loaded. For example, on mobiles I want all my slides to be closed but on desktop - opened. So i've used mounted()
hook to trigger style of the slide. Here's example:
mounted() {
let contentH = this.$el.querySelector('.features').style.height
if (contentH === '' || contentH === 'auto') {
this.featuresOpen = true;
}
},
and i've added events to slide;
slideCloseStart() {
this.featuresOpen = false
},
slideOpenEnd() {
this.featuresOpen = true
},
from v-show-slide.
@phegman I would agree with
That said, it is a fair point that I don't think
overflow: hidden
is needed once the item is open.
There is a problem when you have a dropdown near the end of the rolled up content, such as in a collapsible section of a form - when overflow: hidden is set, the drop down is cut off at the bottom.
Suggest removing overflow-hidden at the end of the transition to solve this.
My solution for now is to use the close-start and open-end events to toggle this style property:
//- element w/ directive attached
@slide-open-end='onSlideOpenEnd'
@slide-close-start='onSlideCloseStart'
//- view methods
onSlideOpenEnd () {
this.$refs.rollupContent.style.overflow = 'visible'
},
onSlideCloseStart () {
this.$refs.rollupContent.style.overflow = 'hidden'
}
from v-show-slide.
Related Issues (9)
- Toggle condition on multiple components with v-model HOT 2
- Border size isn't counted in HOT 2
- Callback/events HOT 3
- Missing Declaration HOT 1
- Form Fields are Fillable, even when hidden HOT 1
- Typescript support HOT 1
- "Read More" mode by changing default CSS values HOT 1
- Does not work, may be because of Vue3? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from v-show-slide.