Floating group vertical float issue in reusable element


I am creating a sidebar menu which standard is small with only icons, some Icons will display a group focus to directly add a thing. There is also a menu toggle which expands the menu. So far so good.

I want to have the sidebar 100% of viewport height so I set vertical float to both and made the floating group the same height as the page. Problem is that when I want to put everything into a reusable element, the floating to 100% of viewport height breaks.

How can I solve this? I really would like to have this sidebar and all the UX stuff to be part of a reusable element. Thanks!

1 Like

Hi @FJP :slight_smile: I have a very similar setup, and couldn’t find a way to have the floating group stretch the height of the page as a reusable element. I’m sure you’ve thought of this as well, but I have individual floating groups on each page (not reusable) that stretch the height of the page, and the menu itself is all within a regular group reusable element, that’s then placed into each floating group. In the screenshot below the FG - Navigation is the floating group, and the desktop navigation reusable element is within each of those floating groups:

Thanks @fayewatson . Do you made a separate desktop menu and a separate mobile menu? I was trying to combine these so that I didn’t need to configure Link settings of the the menu items twice. But on the other hand it does make all the conditional formatting and show/hide element settings quite a bit more complex. What are your thoughts on this?

No problem at all! :slight_smile: I use two separate menus (desktop menu and mobile menu) but that’s only because the mobile menu has more navigation links and a slightly different design than the desktop navigation reusable element.

They have the same overall setup though (a regular group reusable element is used for each menu, and those are placed in floating groups). The reusable mobile menu also has a ‘slide out’ animation when it becomes visible; when that action occurs, another grey transparent floating group becomes visible to ‘grey out’ the rest of the page:

(If those effects aren’t really needed then it is probably easier to keep both in one reusable element :slight_smile:)

Hi @fayewatson. How did you manage to make the height of the floating group responsive?

Hi @shpak.serhiy :slight_smile: as long as the floating group’s height is the exact same height as the page’s height in the editor, and the floating group is set to float:both, it should adjust automatically. If you have those settings already and it’s not adjusting, feel free to share a link to your app editor and I’d be happy to take a look!

Hi @fayewatson,

Please look at what I want to achieve.

On wide screens a small menu is show with only icons. On some of them I can hover to show a group focus for directly adding a thing.

I can expand the menu to show it at full width
When hovering on Contracts I want to show a drop down “+ New contract” (not implemented yet)

On mobile I only want to show the menu toggle and on toggle I want to show the expanded menu.

Would you split the menu in a wide (desktop) and mobile version, or can this easily combined into one single menu with specific conditions.


Hi @FJP :slight_smile: If you anticipate that you will have some mobile pages with only the expanded menu (for example, if you have a different menu button that becomes visible at mobile width, and clicking it automatically shows the expanded menu), then it may be easier to set the expanded menu as its own reusable element. Then, you can place the expanded menu reusable element in the skinnier menu reusable element.

If you’re not going to have that setup, and both menu styles are only going to be used together, then it’s probably easier to keep it as one reusable element.

Thanks @fayewatson. I will try both approaches and see what’s suits me best. Will post my findings here

1 Like

I know this is very dated, but how does this work now? I am struggling to make a floating group stretch to the page height in my app.

It is the flexbox responsive engine for a long time now. The responsiveness is pretty straightforward.

Ehh, maybe. I would agree that in general responsiveness is pretty straightforward. But I still can’t figure out how to get a floating group that I am using as a side nav bar to stretch the whole page no matter what.

So for example I have it set as same height as page, but if someone is on a bigger screen or zooms out then it is no longer full page height.

Here is a quick demo test responsiveness | Bubble Editor

Maybe it has to do with the fact I have it within a reusable then? Here are some screenshots:

Normal Page Height (for my macbook pro) ^^^

Zoomed out^^^^

As you can see the main group for the page is behaving as expected, but the Side bar does not. I have both of these elements set up with the same settings. So one of the only things I can think of is the fact that it is in a reusable?

You don’t need using floating group for this menu. You can use just usual group.