Reusable Header Resizes on page load only


I have created a reusable element from a Header I created. The reusable element is inside a floating group and the reusable elements page’s fixed width box is unchecked.

The Header is resizing as expected on the original page. Subsequent pages with the reusable header of the exact same element aren’t.

I believe I have found a potential bug because resizing the window then refreshing the page means the Reusable element does resize. Its just not resizing dynamically when the user is resizing the window.

Within the Responsive mode for the reusable element, I don’t have the same control as I do over editing a non reusable element.

Any ideas what could be going on?

Keep in mind that the definitions of the master reusable element (where you actually create and edit the reusable element) are not exactly the same as the definitions you give to the different instances of that reusable element on assorted pages throughout your app.

Double check the settings of the reusable element and sizing as it exists in its various instances across the app.

You can use the app search tool to quickly identify all of the instances of the element and apply some types of changes in bulk. Here’s a video overview.

Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

I can’t resize the reusable header in the builder. Im thinking this is linked to the issue. Im checking everything including testing on a fresh page. I have since been able to check the elements individually and all is setup as the original. I have cross referenced in the debugger and the headers are a match in attributes. So somewhere in creating the reusable element it has locked the elements width.

Scratching my head with this one.

Can you share a link to your editor (either here or in a private message)? Or take a video screenshot and post here?

Googling how to do that. Its in dev and not on a plan yet. :confused:

I uploaded a video to show the behaviour. You can see the resizing not changing but then when hitting refresh, it does change.

I decided to create a new reusable element and build the header by copying in the relevant pieces. This has resulted in it functioning as expected.

My suspicion is that when I was selecting the group and click “Create Reusable Element from…” its copying all of it into another floating group container which is causing the behaviour.

Sounds like you got the issue. Though if you want me to take a closer look, feel free to PM a link to the editor to me. (You can set an app to “everyone can edit” regardless of if you’re on a paid plan or hobby plan via the Settings > General tab).

1 Like

I will no doubt need that in the future so that is great to know!

1 Like

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