New Responsive Engine [beta] is Live!

Please stop changing everything to fix width when I click"Group Elements in a group". I’m tired of having everything perfect and then essentially having to redo all the settings from scratch - it’s a nightmare.

Explanations on the responsive screen would be very much welcomed back as well.

However, I am coming around to the new editor… It’s a shame we lost the drag and drop and everything is much slower to build but the additional features are worth the tradeoff.

We also need the ability to change the order based on page width. Actually the ability to change all layout settings on page width would be amazing.

Cheers :slight_smile:

7 Likes

Last night and this morning I noticed a problem…

If I have my page container layout set to Fixed the moment I do anything like resizing another element on the page or moving a button slightly the page height automatically resizes and snaps to that element.

So if I have a Button
Container type Fixed
W: 85, H: 31, X: 359, Y: 132
and I move this button
The page Height snaps to 163

This is happening every time something on the page is adjusted and I have to keep clicking on the page and enter the page height I want (there’s not much that aggravates me but this is one of those lol)

Has anyone expieranced this behavior?

Yes indeed. Have not yet submitted a bug report though, so please do.

You got it, consider it submitted :wink:

2 Likes

So using the new responsive engine, I’ve been able to create my dream layout when the main content is repeating groups. Without using any floating groups or hero-sizing, I’ve not got a full responsive app that looks fantastic, and is easy to control responsive wise.

However, I want to keep this layout throughout my app, which primarily uses re-usable components. So I was hoping I could just replace the repreating group with the re-usable component as such.

However, when I add a repeatable component that is longer than the viewport then it ruins all my vertical stretching and the left two side-bars now start scrolling. I discovered a way around this would be to make my re-usable components pages and display this in an iFrame but then the URLs dont’ change, which make it impracticle for my purposes (and not particulalry efficient).

Am I missing something? Or else can we make it so can we have a “scroll” container type or something to be used in a group that scrolls the content within the group that stays locked?

Ok, solved it. Seems you can put a re-usable component in a repeating group. So I simply add a single-row repeating group (with any criteria that will generate a result) and embed the component into that group. I have a bunch of repeating groups that a hide/display based on URL parameters. The nice thing is that unlike groups in the new responsive engine, I can stack these repeating groups which is how I used to organise my components in the old engine.

This seems to work a treat, however, I still think Bubble should create a less-hacky way to achieve this and allow components in a group to scroll within that group.

And while we’re at it, a conditional property that lets you display a re-usable component would top it off, and make building SPAs a breeze!

@nocodeventure, this?

1 Like

You need to checkbox in layout to collapse when hidden

2 Likes

@nick.carroll can we please have “min. height” to not keep changing automatically? Especially when we are writing expression in a text field, just because expression is long, the text field’s min height is increasing. It is frustrating to keep fixing those again and again.

@nick.carroll How do we control a popup to the center of the page, or at least control the margin from top to bottom

1 Like

I don’t believe this is an option (yet). We did recently fix a bug where the placement of the popup was different from the legacy engine though. Logging this as a feature request.

2 Likes

Something I often do to control the spacing at the top is simply remove the background and styling from the popup itself and then style a group inside to look like a popup.

If the popup should close when clicked outside, then I add a workflow to the popup element to close itself on click as well as an empty click workflow on the group so that the popup doesn’t close when the group is clicked.

The only “issue” - and it’s a minor one - is that the mouse pointer changes to the “hand” when over the spacing region. Works just as one would expect though.

-Steve

6 Likes

Offcourse, that’s genius

Hey everyone, quick announcement!

You can now allow your groups to scroll when content overflows with a new checkbox available on container elements. Your container will have to be either fixed height or have content taller than the max height for the content to actually scroll.

Note: the container itself will not scroll in edit mode and the content will appear to be cutoff. To design the content that will appear “below the fold,” set a larger than needed max height in edit mode, then readjust to the right max height when you are happy with how it looks.

12 Likes

There is now a subcategory in the “Need Help” category devoted to the New Responsive Engine. As many users have pointed out, this thread is getting quite hefty and important knowledge sharing is getting lost. If there is a better place for this subcategory, let me know. Thanks all!

6 Likes

Appreciate the feedback - we are looking into how to make this process more seamless, including selecting what container layout type you want when using that menu option.

Happy to hear you are coming around to the new editor. Bringing back drag & drop within responsive containers is also something we are looking into :slight_smile:

5 Likes

So to confirm I’m understanding this right, is this new scrolling behavior similar to what was previously achieved with a floating group in cases where a developer wants, say, a sidebar through which people can scroll without scrolling the main page?

This is correct

1 Like

Hi, we just released a video on using the new responsive engine to our youtube channel, hopefully this is helpful to some.

2 Likes

Any chance we can see the roadmap for the responsive engine? So we know which items are being tackled, planned, or ignored. I don’t think this even needs a timeline aspect to it, just a way to track things as they’re complete - the release notes don’t share much and things aren’t always updated in this thread.

It would be helpful for builders when we plan our work and schedule the time to start converting pages.

12 Likes