Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

Yes, unfortunately the drag and drop plugin has some bugs until it can be updated to the new engine. It is on our list to be addressed, thanks for flagging.

1 Like

Thanks @nickc for your guidance, it’s really helpful and sensible. I will try to use selectpdf on my responsive page and see if it works.

1 Like

Have you figured out how to make scrollable sidebars work in new system? I have been trying to figure out a way to do this with no luck yet. The way I was doing it before was how you mentioned, using a floating group that was the same page as the height.
Now it isn’t scrolling and I am a little frustrated.

@openocean.tampa
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.

2 Likes

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 (bubbleapps.io)

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?

2 Likes

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

Hello,

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.

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