Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

Isn’t that what the ‘fixed’ layout provides?

Is there a public roadmap somewhere? Internal padding and some way to specify gutters would be very welcome.

1 Like

No public roadmap officially, but I will be channeling all of this feedback into our ideaboard (which is public). I can say that a lot of the feature requests that have been brought up so far are totally reasonable and already on the list. The beta was meant to set a foundation for what is now possible with css flexbox & grid.

7 Likes

Setting elements to 100% page height - FINALLY

All very reasonable requests. Noting these down for the team to review.

1 Like

We are aware of some wonkiness going on with the group focus element and are looking into it. Thanks!

3 Likes

Will look into this, certainly a reasonable request!

2 Likes

Noting this down, certainly a reasonable request!

2 Likes

If anything, the new system should respond better to Custom CSS than before. It sounds like settings related specifically to viewport height don’t seem to be responding?

So far the new engine is great and much faster for me. Spent the last few days converting reusable objects, and it’s been mostly smooth so far, except for one issue with collapsing groups that wasn’t present in the legacy editor.

For some reason, it appears there is a delay before groups collapse. So, showing a popup, for instance, with multiple collapsable groups will show the space of groups hidden by default before properly collapsing. Unfortunately, I haven’t been able to find a workaround other than maybe using animations when groups collapse to ease the transition (which isn’t ideal).

2 Likes

Thanks Nick! Appreciate you guys jumping on this feedback so quickly.

Do you have a video of this behavior? If you suspect that it is a bug, please file a bug report as well.

I thought it was just my eyes.

I use page URL parameters to adjust visibility of different sections/groups in a page and definitely see a glitch before things settle.

1 Like

Maybe it is very obvious but I can not figure out how to inject a group (container) in between existing groups. (containers)

I think pages become very complex to “fix” when they are converted to new responsive mode. It is container inside container inside container inside another container etc. (still have a great respect to the team who came up with the conversion algorithm)

Similar to the way other lists are reordered in the editor UI - click to move the selected element one slot at a time (or to beginning or end).

Not the best UX, but hopefully that will improve with editor updates.

5 Likes

@nickc Building a new app and am ready to go all in on the new engine. Any way to trigger the new engine by default in each new page? Perhaps a toggle in the App’s Settings?

It seems one should be able to create a page to use as a “template” and then create new pages by cloning the template page.

2 Likes

I was able to fix my group focuses! I’m not sure if they pushed and update or I just missed it the first time around, but whenever I converted my page to the new engine, it set all of my group focuses to a fixed width and height, and set those values to 0.

I changed them to something reasonable and they worked.

7 Likes

Well done Bubble team for this new responsive engine, there is a bit of a learning curve but I’m sure we will save a lot of time in the end vs. the previous version.

I am struggling with one particular page layout where I want to show
A/ A left floating menu and
B/ the content of the page on the right of this menu. The content is left aligned on desktop (i.e. for large screens).

Now on mobile, I’d like the left menu floating menu to be hidden and the content of the page to be center aligned. And I can’t seem to make this work.

I set the page layout as align to parent:

I used a floating group with a fixed width of 240px for the left floating menu

And for the content, i used a row layout with a left margin that i set at 240px.

The layout works as expected on desktop (i.e. with large widths) where the content is left aligned:

But on mobile, I can’t seem to center align the content ! (I did put a condition on the floating menu to hide when widths<500 which works well):

Does anyone have an idea what can be done to center align the content only on mobile? Maybe @nickc has some guidance?
thank you!

1 Like

Here’s a clip:

Each of the coloured boxes is a separate row that is hidden by default and only shown when the tab is selected. However, the popup shows the full height initially and then collapses. You can check out the editor configuration and demo here.

5 Likes