overflow if position absolute

[reslear]

please add option to change css overflow

[stayacid]

@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

[phegman]

@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;
}

[stayacid]

@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
      },

[tremendus]

@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'
    }