So, I am trying to set up my pages like this - with a sticky floating header on the top, sticky floating group on the left as a menu (so only the content in the blue section scrolls) - but is there any other way to set it up with using floating groups for both? I’d love to be able to put a floating group within a group so that the other elements always maintain their distance, without having to setup conditionals on each page. Reason being, my header will sometimes be thicker on some pages than others, so I would like for the blue group to always adjust for that and maintain 20px from the header, menu, and footer.
In my apps I use my plugins that are on the marketplace.
I use the dynamic width and height plugin to get the page height and then to set dynamically the height of my target elements which can use the heights of other elements as well as other values you input (such as the gap or margins between elements) to get the exact height of the target element to fit perfectly into the view. This target group can be scrolled if you set it to, while the page would not.
The float a element plugin allows me to put a group inside of another container (such as a floating group) and make that group be a floating group (can set conditionally as well) so that when a user scrolls my left menu, the header of the left menu remains at the top (perfect for continuous display of selected filters while the user scrolls the entire filter section…or header of a product display as the user scrolls the product, or the image gallery - basically, I use it a lot to get elements to float wherever and however I want them to.)
Hi @calicass83,
Is the footer always a fixed height? Also, what’s the page supposed to look like on mobile?
I think the float a element may work for my use case, any chance I can get a refund if for some reason I find it doesn’t?
You can use the subscribe feature to test it out, and then if it doesn’t work for your use case, you can unsubscribe.
Yes, the footer will always remain fixed height. The mobile page will not have the left menu. Currently, I have it set up so that a groupfocus appears on click of a mobile menu.
I’m not sure if I have it set up right - can you take a look?
Group menu, group header, and group footer are supposed to float/stay put, while group content is the only group that scrolls.
Hey @calicass83,
Can you explain what you mean by the header “sticks to the top of the page and moves down as user scrolls”?
How can it stick to the top AND move down? 
Sorry - the header acts as a floating group and sticks to the top of the page, so that when the user scrolls down, it’s always visible.
If I understood correctly, here’s one way to go about it…
It’s 100% pure Bubble and doesn’t use any floating groups. Instead, the blue group in the middle is set to scroll when the content exceeds its height.
The only real downsides are:
-
If there’s lots of content to add to the scrolling group, the editor (UI builder) page height might have to be temporarily increased to get more vertical real estate in design mode.
-
The Scroll to an element action doesn’t work, since it’s not actually the page that’s scrolling.
Anyway, if you think it might be useful, PM me and I’ll send a link to the editor so you can copy/paste it into your own app.
There might be another workable approach which would use the page itself for scrolling. If I get a chance, I’ll look into that.
Anyway, good luck. 
That could be very useful! I’d love to give it a try. Thanks!
So I had a chance to noodle on this, and here’s an approach that uses three floating groups and the actual page scrolling behavior (not a scrollable group) which means the Scroll to an element works. Again, this is 100% pure Bubble.
Additionally, there are no special design mode considerations. The entire page is in viewable and editable.
Personally, I prefer this approach over the previous, but I’d probably create reusable elements, and I think I’d ditch the scrollbars in favor of end faders (to indicate additional scrollable content).
Anyway, not sure if this meets all the requirements but wanted to share an alternative approach.
Looks like you are not using the plugin in the way it is meant to be used. It is meant to make groups into floating groups when a floating group element is not a possible choice, like when it is contained by another group.
In your setup, you can simply have the header as a floating group element and the side menu as a floating group element.
I thought from the title of the post Floating Group within a Group as Header, Side Menu that you were looking for a way to make it so you could get sa functionality, where you have a side menu, and inside of the side menu, you have a header and want that to float as the side menu is scrolled.
My plugin is made to overcome a built in limitation of the floating group element, which is it has to live on the page and can not be contained by other container elements. From the page setup in your editor, that is not how you are attempting to use it. In your editor, you should just make the header and side menu floating group elements as they are on the page and not contained by another container, and if they are likely should not be.
I got charged $69.23 for trying this out for less than a day. Can you refund me? I can’t use it for what I thought it would do for me.
I didn’t charge you as I don’t run the Bubble Marketplace.
You need to contact Bubble about refunds for their marketplace.
I don’t think that would be the case as the plugin only costs $10/month and $25 one time. If Bubble charged you $69.23 then, Bubble must have an issue in their system and you would need to contact Bubble support about it.
Hello Sudsy, I hope you are doing well!
Can you please share with us how to achieve this?
Best Regards
Hi Rakanali,
There are at least three different ways to go about it, two of which are depicted in this thread. The first uses the Allow vertical scrolling when content overflows option of a group. In that case, it’s only the group that’s scrolling. The second uses floating groups for header, footer, and sidebar (which remain in a fixed position on the page), so it’s actually the page that’s scrolling.
Anyway, if you have specific requirements, feel free to message me directly (click on my avatar), and I’d be happy to discuss further.
Regards,
-Steve