Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine Feature Request

Also, in the past you could just hide the group that you wanted to avoid. Now, even after hiding a group the element gets pasted into that group

Another request:
Switching from px to % in the width and height settings just takes the number you had before. So 280px becomes 280%. Can we just use 100% or something as a starting point?

Also, of course, copying and pasting responsive settings from one element to another (similiar to conditional formatting) would save so much time.

2 Likes

Yes, this would be great as the old engine also provided for this terrible situation in which tab order was not an automatic setting by Bubble based on the position of the elements.

I would think now that we have the previous next operators to rearrange things because drag and drop is no longer possible, it should be feasible for Bubble to set the tab order based on the positions.

Would also be fantastic to just have a simple input on the ‘input form element’ dialogue to set that tab orders manually.

At the moment the only solution is a plugin that does a decent job but is by no means in my experience perfect.

3 Likes

I am just copying the response from Bubble on this same subject that was linked to in an earlier post.

Upon further investigation, I’ve found that this is expected behavior. In the new responsive engine, we purposefully do not remove hidden elements by default as that can effect positioning of other elements within the same container. In order to replicate the “Hide” functionality of old responsive, you can instead check “Collapse when hidden” on the element you are trying to hide. This will remove it from the canvas when hidden.

Definitely a great request. Bubble can definitely do more to make it so that the default settings when switching is more in line with user expectations and also allowing the element to fit into the container.

Hi Tia

I would request that the posts on this thread be more directed toward a feature request rather than request for support on how to use the new responsive engine.

This post maybe better positioned on the original announcement post by Bubble about the new responsive engine. My goal with this thread was to make it a bit easier for those at Bubble with the task to sorting through all the messages they will be receiving to see feature requests. The announcement thread seems to be getting more posts related to feature requests, Bugs, How do I do question posts and opinion posts.

Cheers

To take this one step further, it would be very helpful to be able to double click any element in the Element Tree and get the full inspector popup, and right-click to get all the same options you’d get from right clicking that same element in the main workspace.

Basically, double-clicking and right-clicking an item in the Element Tree would result in the same behavior as double or right clicking an element in the main workspace.

2 Likes

I’ve been doing the cut-and-paste, but it’s more difficult when you have workflows attached to an item. So then I have to “Copy with Workflows” and “Paste with Workflows,” and then go back to delete the original. It’s hacky.

Your idea of being able to move items within the Elements Tree is brilliant. I’d love that.

2 Likes

Thanks for putting this thread together.

Some other points:

  • can we show the current element pixel h/w, since we’re not drawing anymore we don’t really know the pixel dimensions
  • can we expand the properties available to us in the conditionals tab? I’d love to have more controls conditionally.
  • it would be great to allow plugins to load on a page without taking up space for responsiveness
  • also would be great if font size can auto scale between two endpoints
  • can we have control over whether a group allows for overflow?
  • can we control the z-axis for floating groups so that there is similar responsive behavior between those floating groups as if they were flat on the page.
2 Likes

Adding the current right click menu on an element to the element properties (popup) window would be great. This way the ungroup action (and all other actions) is always available, even when an element is hidden by another element. Maybe via a button in de window bar to open the menu (see mockup in picture)

1 Like

Would be great to have the new responsive properties on an element as options in the Conditional tab. Forinstance when displaying a website on a small device I would like to change the Container Alignment from Left align to Centered

2 Likes

Yes…I think they need to give us access to every property from the layout tab in the conditionals. Only then would this new responsive engine have been worth it, because without them we are very limited in what we can actually achieve.

3 Likes

Feature Request

CC: @nickc

When using the responsive engine, it would be nice to be able to see the current dimensions of a container.

This would be helpful during the build stage so I can set correct max and min heights of similar elements.

5 Likes

It would be great to have a setting onto container elements that would be an input giving us control over when the container initiates a ‘page break’…I know Bubble has an intention of releasing a feature related to page breaks, and I personally think it is likely going to fall short on functionality.

From my understanding at the moment is Bubble intends to give us only the ability to set page breaks at 320, 768, 992 and 1200…giving us only access to these 4 is going to pigeon hole us unnecessarily. The same functionality can be provided by giving us control through an input what px value we as the developer want to use. Looking across the world wide web, there is no one size fits all page break, and even looking at individually pages across a website, there is not a one size fits all page break.

One of the main reasons I think it would be necessary to put this onto the container level, and not just the page level, and to give us an input to set that px value instead of pre-determined 4 choices is that as we now have the great ability to create containers on a page with a specific layout style, the correct approach in my mind is to treat each container as separate entities with their own design needs. I could have on the same page two different containers that I want to have their contents based on the content sizes break lines at different points…and this should not be based on page width only, but give us ability to set it based on container width as well.

Another reason is that today I saw a post for help in achieving a design with two images whose min width settings and the desired container break px value did not allow for the behavior the user wanted.

My response with a video to help likely did not get the exact design since the only approach possible at the moment is to set large margin values which likely is not desired.

Agree, as a temporary solution you can activate “Show distances on hover” in the top-right menu “Grid & borders”, but you might already know this.

image

Yeah, at the moment when in the responsive tab you can click onto an element, then move your cursor away from it and then hover it again to see the dimensions…not the most intuitive or user friendly way to show it.

I personally don’t know why they removed the details we have in the original engine as they are not doing anything with that space created by removing it.

Screen Shot 2021-11-22 at 5.27.14 PM

2 Likes

On the point of moving an element from one group to another: Drag and drop doesn’t work when the destination group is of a smaller dimension. And one can’t simply drag and increase the width and height of groups either. It requires elaborate change of width/height, which you may not want or may not do accurately at one go.

Even if this is fixed, it would be of great help. Just make it possible to drop an element or group to a smaller group too.

2 Likes

The video doesn’t seem to be loading, do you have it somewhere else perhaps?

Your second request has been addressed. Groups in a column will stretch to their max width if “fit width to content” is not checked and alignment can be specified. Thus, there is no need to use the horizontal stretch if and alignment is required at a certain max width.

I just sent Loom a bug report. Was working previously.