search

BrentonCozby / dom-slider

Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.
MIT License
61 stars 7 forks source link

padding-top and padding-bottom is wrongly calculated #15

Open lubomirblazekcz opened 4 years ago

lubomirblazekcz commented 4 years ago

padding-top and padding-bottom is wrongly calculated when element is closed by default with display: none or DOM-slider-hidden

on the first opening the padding-top and padding-bottom is always 0px

lubomirblazekcz commented 4 years ago

https://jsfiddle.net/tr3v1cky/8/

here is demo, it happens always - seems that box-sizing: border-box is the main problem

solution would be not subtracting the paddings when border-box is set

BrentonCozby commented 4 years ago

@evromalarkey I've published the fix you mentioned and updated the CDN link in the README. Unfortunately, this only seems to fix it after the first call to slideToggle; the transition jumping becomes smooth with every slideToggle after the first one.

I've actually seen this bug before but I'm still unaware of a solution.

lubomirblazekcz commented 3 years ago

Thanks for the quick fix, I was able to fix it even on the first slide. You have to add paddingTop and paddingBottom when the element is hidden, because before that the padding is always 0, so if you add condition for borderBox here also, it should fix it.

        if (slideDirection === 'down' && isDisplayNoneByDefault) {
            element.classList.add('DOM-slider-hidden');
            element.style.display = visibleDisplayValue;
            contentHeight = Math.max(element.scrollHeight + paddingTop + paddingBottom, 0);
        } // a fixed height is required in order to animate the height
BrentonCozby commented 3 years ago

...You have to add paddingTop and paddingBottom when the element is hidden, because before that the padding is always 0, so if you add condition for borderBox here also, it should fix it.

        if (slideDirection === 'down' && isDisplayNoneByDefault) {
            ...
            contentHeight = Math.max(element.scrollHeight + paddingTop + paddingBottom, 0);
        }

@evromalarkey Unfortunately, this breaks the FAQs in the example.html I provided, causing them to expand too far.