Problems with dynamical content height with scrolldeck.js

HTML & CSS
1

Hello everyone,

I’m trying to build a single page website with some parallax effect by using scrolldeck.js, and i’ve added accordion content to the “Slide” (you can call it “section”). The problem that i had was when i expanded (by user click) the content the height of the “slide” does not expand based on the content inside. And what i’ve found was each sections height has been calculated and assigned when the page was loaded and does not trigger when there are more content insides. If anyone could give me some advices on how that could be fix that will be very appreciate.

Please check the following link for references:

Thank you

2

That’s a small height adjust. Just give the container more bottom padding

3

Or the element below it more top padding

4

Hello Eric,

Thanks for your feedback and advices. I’ve tried adding paddings to the bottom before and it doesn’t resolve the problem. Because the content’s height doesn’t dynamically change it’s variable as it was defined as a fixed height at the first place (i assume). So it’s still partly hidden when some other content was expanded.

:slight_smile:

5

It’s better to edit the JS if it is doing things you don’t want, but that’s not always easy with these third party scripts. As an alternative, you could make a brute force change to the CSS with something like this:

#why-jo {position: static !important; height: auto !important;}
#about {position: static !important; top: auto !important;}

Bit of a shame to have to do it that way, though.