TIL how to do sticky groups

It turns out position: sticky is a thing. Is it news to anyone or just me?
It’s not yet native, but it’s easily done with a bit of CSS.

CleanShot 2022-09-13 at 10.37.04

23 Likes

I was looking for a complex responsive design :sweat_smile:
than I found:

Great job and so much simpler.

5 Likes

Nice! :muscle:

:laughing:

I’m quite certain I’ve tried this before but it didn’t work. They must have done something. I got the idea from Bubble’s own website.

CleanShot 2022-09-13 at 09.09.54

1 Like

It seems to work on RG’s too.

CleanShot 2022-09-13 at 19.27.37

demo
editor

8 Likes

I’ve been trying to replicate this sticky feature but can’t for the life of me figure it out.

I have a floating header and a search & filters group beneath which I’d like to be sticky but it just scrolls underneath the header.

When I scroll down, the sticky group disappears underneath the floating header.
Am I missing something, is the floating group affecting the sticky group?

I think what you have to do is to set that bottom group to height 100% and not fit height to content.

1 Like

Thanks Rico, that did the trick.

On a slightly different note, do you know why I am getting a scroll bar even though the bottom group is set to 100% height? (NB: All hidden groups below are collapsed)

image

image

1 Like

Maybe check the minimum page size. Are you using a reusable, check the minimum size of that, too. Maybe there’s an element in the page that is not visible, but it’s retaining its size. Or even a plugin that you’re using that’s occupying some space even thought you can’t see it.

I normally throw those plugins into a floating group, make the floating group 1px x 1px. That normally does the trick.

2 Likes

Thanks for such great tips. Got it working now.

1 Like

Thanks @rico.trevisan this is really cool and I’ve just implemented it in an app :smiley:

1 Like

Any idea how to make this work with a horizontal group? I was wanting the first cell in the repeating group to be sticky if possible. Without using the workaround of making a group outside of the repeating group. Would save myself a lot of time. Here is an example:

I want this first cell in the repeating group to freeze to the left side like a header when scrolling to the side. I am hoping this sticky idea would work. Ideas?

I flipped my original table around and changed the CSS to say left instead of top. (yes, it’s a visual monstrocity, but…)
CleanShot 2022-10-17 at 10.39.38

Keep in mind that I’ve got a rg inside an rg.

demo
editor


The CSS:

<style>
#sticky {
    position: sticky;
    left: 0px
    }
</style>
1 Like

The only way I was able to get it working was with an RG inside of another RG.
CleanShot 2022-10-17 at 11.06.42

demo
editor

I think it’s because on the first case the header is part of the scrolling group, it’s part of row 1. I wonder if sticky is a good solution for your case.

Yeah. I was hoping that wasn’t the case. Oh well. Just have to do it the old fashioned way. It would have saved me so much time in this case though. Thanks anyways! :raised_hands:

1 Like

Can anyone advise where I might be going wrong with the example below?

Sticky RG

It’s a custom timeline calendar with a RG inside another RG.
The Top-level RG works perfectly, but the RG nested below doesn’t work.

1 Like

Pity he withdrawn. I think the answer lies in this video from @eli : Bubble - How to create a horizontally scrolling table - YouTube

Thanks Rico for your reply I will take a look now !

Thanks @rico.trevisan for uncovering this CSS trick, so simple, yet so effective and can make up a pretty good UI.

This is awesome, thanks for sharing! This really helps lift some of the limitations of floating groups and honestly should be how they are actually built to allow for relative sizing/positioning.

2 Likes