On my website, I use some custom (probably poorly written) Javascript to make collapsible codeblocks. I’ve got this one many articles, and most of the time, it works without issue. However, on some specific times, it leaves a huge block of space at the bottom of the page.
For example: https://0xdf.gitlab.io/2024/05/25/htb-bizness.html
In this image, I’m showing where the HTML element ends, and yet the page has a ton more space.
The JavaScript is here: https://0xdf.gitlab.io/assets/js/collapsable.js
The element causing the issue is the third code block in this section:
If I shorten the data in that collapsed codeblock, then the issue goes away. But I’ve used this same feature on numerous other codeblocks and many other posts without getting any extra space at the end.
Is there something I can do to prevent this? Or fix it after it happens? I’ve played with adding commands to the JS to try to trigger a reflow. Either I’m not doing it right or it doesn’t fix it.
2
Answers
Add
.code-collapse { overflow: hidden; }