Stop Changing the Width of Reusable Elements

It is a great help to have the height of reusable elements to automatically adjust everywhere it is used when we make changes to the height of the reusable element in some cases…however, I have not yet encountered an instance when I was happy with the fact that now, the width of reusable elements automatically get adjusted to the reusable elements width when you make any change inside of the reusable element, even if you don’t adjust the reusable elements width.

To get the best use of responsive design techniques, I often create reusable elements at a specific width and then on the page I use it on I set it to something different for a who variety of reasons to get the type of responsive designs I need.

For some reason now, every time I make any edit to any element inside of a reusable element, every instance of it being used throughout the app, are all adjusted the width back to the reusable elements width.

One example is a reusable element as a popup with width set to 320px…then on page I add the reusable element and set its width to 680px because I have elements inside of the reusable element that use the responsive parameter of ‘wrap to previous line when page is stretched’…now after any edit to the reusable element, even if I don’t edits its width, the width of the RE on the page changes from 680 to 320…

Extremely unhelpful in my opinion to have the width of reusable elements automatically adjust after any edit to any elements inside the reusable element.

1 Like

I very much have to disagree with this. I use a lot of reusable elements for the “pages” on single page apps. They absolutely need to be responsive and width and height. If you want your reusable elements fixed width then you need to better set up your responsive design and make the elements inside your reusable element a fixed width. There’s a post floating around about the advanced use of reusable elements. It’s a very good read I’ll have to see if I can find the link and post it here.

Yes agree…and you definitely missed the point of my post.

It is not at all about making the reusable elements fixed width…it is all about enabling the developer to have the most advanced abilities for responsive design with reusable elements. I provided an example in description of one possible way I use it, so I’ll try again for you to understand an advanced technique of reusable elements.

One example, is a reusable popup built at 320px with a group element using the ‘wrap to previous line when page is stretched’ responsive parameter. When I put that reusable popup I size the reusable to 680px to “make it stretch” and therefore enable the ‘wrap to previous line’…this is an advanced method to get responsive reusable popup to look good on mobile as well as any other device size.

The problem is that when I make any edit into the reusable popup that has nothing to do with width, even just changing a color, Bubble automatically changes the width of that reusable element I set on the page from 680px down to 320px and then I lose that great responsive design for all devices.

By the way, I also use reusable elements for pages when creating a complex single page, and I have those in groups to ‘hide/show’ them…and when the height of the reusable element changes automatically I have to go to the page and adjust the height of the group it is in, so very familiar with why sometimes the automatic change of height may be beneficial, but not the width.