Reusable element (Floating Group) responsiveness issue

I have a floating group which is set to Vertically float relative to: Both.

When I make it a reusable element this function does not work and it stretches the page unfortunately…

See my project here. The index page is using the reusable element and the other page is using the Left Menu without reusable left menu,.

Can you share an Image to illustrate your question?

Just added the link up

Step 1 - Change the type of element of your Reusable element to floating group. .

Step 2 - After step one there will appear three floating group dropdown on the repeating element on your index page. Change these settings to the correct settings and your done.

It’s working better but the problem now is that the leftmenu does not stick to the top and bottom rather it stretches… You can see the difference in behavior in preview

This is what I see. I do not understand what’s wrong with it.

You can see the difference in this page and homepage. You scan scroll down and the left menu also scrolls down and does not attach to the bottom. On the homepage only the body group is scrollable. So there seems to be an issue with the reusable element not having the same properties as normal.

I can not see the homepage. Because It’s only for logged in users. Also, the Run as function didn’t work for me.

If you don’t mind you can take another look on the homepage and see the difference in behavior.

I looked at both pages in Chrome and Safari. I don’t see what you see. Both pages respond the same.

On the index page the left menu is scrollable while on the homepage the left menu is not scrollable and only scrollable when subcategories are folded out.

@can someone help me with this? There is a difference in behavior…

@nocodeventure: I see what you are trying to explain. I guess, the scrolling effect has some dependency on screen resolution. I observe different behaviour based on the screen resolution. If I take a look at the pages on a high resolution screen (1920*1080), I don’t observe this behaviour.

@nocodeventure: I think I have found out the cause of the issue. Since I don’t have edit permissions, I couldn’t verify it. The left menu reusable element that you have created doesn’t have a max width defined. What this is in turn doing is that, when the page width is high, it is messing with the floating menu. See below.

Can you try with setting a max page width on the left menu and try once as highlighted below…

I appreciate all the help and advice everyone, please see attached video recording. The homepage is acting differently and it has nothing do to with the width. It has to do with the floating to the top and bottom not working as it should be.

Can someone check the above issue? I really expected some feedback from the Bubble team.

Have you filled a bug report? That’s the best way to get the Bubble team eyes on an issue.

Oh oke, didnt know that… but i’m not 100% sure if this is a bug. Definitely the behavior of the reusable element is not the same…

This topic was automatically closed after 14 days. New replies are no longer allowed.