New Responsive Engine [beta] is Live!

Floating group set to both should still work.

Actually, I just figured it out! My case was a little complex since my floating group was using a reusable element that collapsed within it. I have a course that Users go through steps on and the floating group helps them navigate to other sections of the course.

Anyways I copied the way that it was done in this post: New Responsive Engine [beta] is Live! - #391 by sudsy

I also had to remove the hidden collapsable groups that were necessary before the update.

1 Like

I have a tutorial that covers it. Check it out here.


Is this only for the responsive engine or in general? I’m seeing some weird issues on the legacy engine

Same with feathericons

Why is there no versioning for the draggable UI plugin to avoid causing bugs for those still on the legacy engine? This has become a big issue on our end. Can we add versioning for Bubble plugins to avoid breaking production apps that utilize them?

Here is an example of the bug:
Bubble | No-code apps (

My post describing it:
Groups Not Collapsing Properly + RG not updating live - Bugs - Bubble Forum

Edit: It seems that the collapse bug occurs when the drag group is “droppable”

Loving the new editor, once you practice, it really is much more intuitive and easy to build this way.

Having an issue though
Why can’t I seem to get the text to wrap? Is there a known bug?


Have a look at some of the parent containers - one of these will have fixed width or min-width that is too large.

1 Like


Does anyone know how can I achieve this with the new responsive engine?

  • I want to have a group in the middle of the page that on desktop could be something like 960px with holds the inputs.
  • So when the pages width goes smaller I want to response on that but I don´t want that when the width is bigger to strech.
  • I´ve been playing with px, %, … but I don´t know how to do it.

Screen Capture on 2021-11-21 at 11-13-35

Also, why when you focus on a input in mobile, it kind of losses the responsiveness that it shows at the bottom of the browser the bar like you can go left or right?

EDIT: solution to this here: Dropdown zooming on mobile - #2 by emmanuel

converted my page and now i cannot click on anything in the responsive section.

Hey boston, this was helpful! However I still have one issue. I would like to have my sidebars appear with a small margin at the bottom and top of the page, however when the min height is set to 100% I can’t figure out a way to show a bottom margin, only the top…

I know that isn’t the best explanation. But basically I am trying to have both of my side bars (left and right side) appear to be floating on the page for the User, rather than just having a white space that extends the whole page length. Because the background of my page is not white.

I actually sent in a Bug report about this issue. I was trying to set a bottom navigation and a top header on the page and have my side menu be touching bottom of the header and the top of the bottom navigation.

Needless to say, it was not possible. If the new responsive engine allowed for use of custom css for height settings it would be possible.

Part of this Bug lead to a feature request of allowing us to have access to a min height setting that would be similar to a calc function for CSS to say 100% - 60px for example.

1 Like

Alright, good to know! Would you mind sharing an update if they get back to you and have any solution?

Hi all,

I am stuck!

What I am trying to achieve is the following:

  • Have 2 images side by side for page width equal or greater than 960px
  • These 2 images should stack on a column layout for page width less than 960px
  • These 2 images should resize down to a minimum width of 320px

Now, I created the following structure:

  • Main group
  • Subgroup for image left
  • Image left
  • Subgroup for image right
  • Image right

I am playing with the new responsive engine settings but I can only achieve one of the following 2 situations:

  1. I set for subgroups a min width of 320px… then the images correctly resizes down to 320px… but with these settings they do not stack on the top of each other for page width less than 960px, but only for page width less than 640px
  2. I set for subgroups a min width of 479px… then the images do not resizes down to 320px… but with these settings they do stack on the top of each other for page width less than 960px

I have played with the images min and max width itself, but they inherit the subgroups min width so it is useless to set them up.

Any idea on how can I achieve the above?

I honestly am not expecting a fast enough turn around for me to remember to do so when it finally comes through. I believe ultimately it is not necessarily a Bug fix but likely a need for Bubble to rethink some of the functionality regarding the height settings.

Video Demonstration

@dodo Not 100% sure if what I setup is going to be satisfactory as it does require the use of margins because of the need to have the page break at 960px instead of 640px.

Video linked above. Hope it helps.

1 Like

I’m loving the New RE (responsive engine)!

One thing Id like to have from the old system (unless I missed it somewhere) is the ability to have trailing dots… for text elements if the text element is not large enough for the text inside.

Which was called: Cutoff element if the element is not tall enough (checkbox).

It doesn’t have to be the exact same thing but something similiar for dynamic text would be very useful.



Thank you a lot for taking the time to go through this.

Your solution is nice, but as you have already mentioned it is not going to work in my case because I would like to keep constant margins between the page border and the images of 20px and an overall space of 40px between the images.

For example, for a page width of 1280px I would like these images to have a width of say 600px each and only be 280px when the page width gets to 320px.

I remember that it was somehow possible to achieve this result with the Bubble’s old responsive engine.


You have to set in the layout tab to be a fixed height.

Screen Shot 2021-11-22 at 10.44.56 PM
Screen Shot 2021-11-22 at 10.44.27 PM