Sticky sidebar with new responsive engine

I have a reusable sidebar element in my app however I can’t figure out how to make the sidebar sticky and not scroll when using the new responsive engine.

I have the sidebar element set to align to parent with a column sub-group within it.

The page it is being used on is set to row and I have set the vertical alignment of the reusable element to vertical stretch, but I still can’t get the menu bar to not scroll out of view.

Is anyone able to explain how they have fixed this issue?

Not sure if this is exactly what you’re asking, but check out this recent thread for some ideas of how to do what (I think) you’re trying to do:

[SOLVED] Anyone know how to make a sidebar fit 100% of viewport? - Need help / New Responsive Engine - Bubble Forum

Thanks @adamhholmes the link to the editor you provided was really useful and I now have it working without using reusable elements. (I had not thought of using both a floating group to hold the content and a normal group to keep the spacing).

However, I have not been able to make the “group side-bar-space”, floating group, and content in the floating group into one reusable element so it can be easily duplicated. Have you found a way to do this?

Hello. I don’t know if I can help you but in this case : Apex-dashboard | Bubble Editor you have an exemple of sidebar with HTML. Turn the menu group in reusable, not the white sidebar. Put the reusable menu on a white sidebar and give the ID : Sticky.
I hope to be clear and helpful.

1 Like