Hello,
For example, let’s say you have a footer that is 80 px tall.
And within that footer you have a group that is 900 px tall.
Is there a way to make it where when the group is shown/visible that you can scroll up and down the group as if it were a page?
Thanks
Add an id to the floating group it, then add a tag with overflow-y: auto !important; to your headers.
Thank you for replying Duke,
Could you go in more detail? I’m still a novice when it comes to bubble.
What do you mean add an “id” and do you do this?
How do you add a tag to a floating group? Do you mean a metatag?
Thank you
Oh wow, thank you so much.
I’ll try this out as soon as I get the chance.
Thanks for making a full video for it!
Hello!
Your video helped a ton. I was able to replicate exactly what you did.
However for some reason, these settings dont work for reusable elements.
Let me explain.
In this case, the floating group that I referenced in the title is a reusable element that will be either a header or a footer. The 900px tall group in this element would be the “page”.
For some reason groups within reusable elements cannot scroll. And despite the fact that I was able to successfully replicate the steps in your video on a test page, they’re not working for me for my reusable elements.
Are the rules different?
Thank you
Is your element ID for the REU correct? If it is share your app with me and I’ll take a look. Or at least screens so I can diagnose the problem.
Hello Duke,
Thanks again for all of your help.
After a few adjustments I managed to get it to work. However I hit a few more issues that I would like your guidance on.
While scrolling now works, the menu of the floating group also scrolls. I’d like for the menu to stay exactly where it is, and for the other groups to be what scrolls.
The larger groups, depending on what is in them, get cut off, making the page appear as if it had not fully loaded. I’d like for the full height of each group to show when it is visible.
Sometimes, instead of getting cut off, the group only scrolls within the 80px height which is not supposed to happen. This goes with #2, the group’s heights are not fully showing.
The footer has multiple groups to hide and show within it, since these are meant to be used as “web pages”. But when changing between groups they hide the menu.
I’ve created a test version of what I’m trying to do which is very stripped down. Only some of the issues can be replicated here. Can you first guide me on anchoring the menu within the floating so that it doesnt scroll with the other groups and how to show the full group when it is meant to be visible?
Thank you
Sure! Happy to help.
Once you’ve read and understood this, it should beome clear.
Your setup currently as far as your menu goes makes it so that the floating group’s children will all scroll. If you’d like your menu to have a fixed position, throw it in another floating group (position fixed) and bring to front so that it hides the top part of the “scrollable” floating group. Then you’ll have a menu that doesn’t scroll and is fixed, a “content” panel that does scroll and is fixed, and the rest of your page.
Cheers.
Hey Duke,
I could still really use some help here. This CSS stuff and all that still flies over my head.
I followed your advice and I’m still struggling with setting the fixed position. All I did was copy and paste the code into the html because there was no other instruction on where to put it on the website.
Would you take another look at my test app and advise me on what is missing?
Thank you
Floating groups have to be direct children of the page, as far as I’m aware, you cannot have a floating group be inside a reuseable element (somehow you’ve circumvented the error that we usually get for that). Second, I think you have to set yourself up to have two main groups in the REU itself:
Apply the overflow-y: scroll to the Group 2 element instead of the Floating group.
Should work.
This was a great help thankyou…
Just a quick one can you control the z value from css
This doesn’t make sense - applying overflow to the group which is supposed to get “cut”. All you get is n empty scroll-bar on the side of the Group 2. You are telling the group to scroll itself, while still being higher than the floating group. Not gonna work.
thank you for the great tutorial!
@duke.severn Thank you for this tutorial!! I used it for my filtering panel (visible on the mobile version of my site) and i got it to work however I have collapsable repeating groups inside my floating group that - when all these repeating groups are expanded the content of them goes beyond my groups and I’m not able to scroll to the very bottom… I am about to add more repeating groups so trying to fix this before I move ahead. Any thoughts on how I could adjust my set up?
This is my site if you happen to have a minute to look: https://bubble.io/page?type=page&name=all_products&id=skincare&tab=tabs-1
