Sticky header in reusable element

[florianherzog]

Dear All

I started the topic with intention of posting in “Need help” but found a solution in the meantime.

Adding a sticky header to a reusable element with content overflow + scrollable + dynamic height is a pain. I worked on this for too long and want to spare you the effort of trying other ways than pretty much the only solution that worked (for me; if there are others, please let me know):

Initial situation:
I wanted to make a sticky header within a reusable element. The reusable element should consist of a Header Group in which I wanted to place filters (and it should therefore be always visible to the user) and a repeating group of a list of things.

I embedded the reusable element in a group and set the embedded reusable element to have a max height as well as the element being scrollable when content overflows.

Here is a scheme of the intended setup:

I tried several things to make the header group sticky: Adding styles (position: sticky;) with HTML, placing a focus group in the reusable element, and adding classes with Classify but nothing seemed to work, no matter the tweaks and adjustments I did. Then I stumbled upon an article that said that it is a known limitation of CSS to add position: sticky;to an element with a parent that has dynamic height / content overflow.

So now: solution

Embarrassingly simple; the solution is to create a table with one column. In row 0 you place the header you want to have sticking to the top and check the ‘make this row sticky’ in the Appearance section. Then you place the content you want into row 1 (with the correct data source for the child elements of course), set the height of row 1 to fit to content and the height of the table element to the intended fixed height. Voila; now you have a sticky header with scrollable content in a reusable element.

Here a scheme of how the setup is now:

Hope this helps!

Best,
Florian

[gerbertdelangen]

Nice, very creative solution and solved using vanilla Bubble.

[florianherzog]

Other ideas how this could be solved? I couldn’t really make sense of any others but would love to learn about other options…

In the nested RG i have further nested RGs which have headers and my optimal case would be that these headers are sticky to the top as well but only one scroll bar is visible. Something like this with either vanilla bubble or HTML / CSS?
How to make multi-levels sticky-headers in React-Native? - Stack Overflow

[gerbertdelangen]

Not a HTML/CSS/code wizard (that is why I use Bubble ) but maybe there are libraries who can do this for you. Another option might be this, use the CSS properties sticky + top, based on the height of the repeating group items and the index of the current item in the repeating group you can calculate the value for top.