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.
29 Likes
Nice! 
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.
1 Like
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)
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 
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…)
Keep in mind that I’ve got a rg inside an rg.
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.
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! 
1 Like
Can anyone advise where I might be going wrong with the example below?
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.
2 Likes
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