Forum Academy Marketplace Showcase Pricing Features

Html element height not readjusting

Hey Bubblers,

I am facing an issue with the HTML element, its size is not readjusting to the html content height into, even if the “shrink to fit” option is applied.

Hereafter the use case : a html element in a bubble page. This element contains some html div, and some of them are collapsible div containing text. The text is shown when the user presses a button.

Problem 1 : html element height is smaller than html contents, when collapsible div is visible. The normal end of page is not displayed and can’t be displayed, as we can scroll up to the bottom of the html contents. The difference between the html element height and the html contents is equal to the height of the displayed div.

We’ll, so I’ve modified by html code so that when the page loads, the collapsible div is displayed (classe = “collapse show”). And using JS script, I then remove the “show” class so that the collapsible div is not displayed.

But it’s not enough, as the html element height is then larger than the html contents (with collapsed div), resulting in a blank area at the bottom of the html contents (the height of this aweful area is the height of the collapsible div).

I really don’t know what could do the trick to get the html contents height and the html element height the sames, depending on the div is collapsed or not.

There’s one thing I didn’t try yet, it’s to use toolbox to adjust the size of the html element by adding / removing the collapsible div height pixels, depending on this div is visible or not. But this solution is ugly…

Did anyone face the same situation before and succeed in getting the html element height really adjusting to its contents?

Many thanks!

I can share a demo if needed…

Nothing better than a demo !

Editor link : Demohtml | Bubble Editor

Preview link : Bubble | No-code apps (bubbleapps.io)

hey @Christophe_HK, I just faced the same issue. Did you manage to find a solution?

I found one. While it’s not optimal, it seems to do the job.

Yeah, but also not optimal. Overflow scroll, hiding the scrollbar. That makes it, the html element adapts to the page, but I guess I could get better.

That’s even better than my workaround. I used a Javascript to Bubble element. My HTML element has a condition to hide when the Js 2 Bubble has a value of 1. I have a Do when true workflow that also fires when the value is 1 and set it back to 0.

So when ever the HTML content changes, the script calls the Js 2 Bubble, giving it a value of one, making the HTML to blink for like 3-4ms, thus refreshing the content.

A bit more complicated!

1 Like