Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

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

I have been waiting forever for this update. So awesome that its finally here.
I think all my apps need to be rebuilt from scratch to accommodate, but I’m so glad it has arrived.

Live view of my first converted app…
iu

12 Likes

Ha ha ha! So true.

Yes, the css used to get the 100vh is not working in the new engine.

I have test pages with same elements in the editor the team could take a look at as an example…one page is with new responsive engine and the other is with old responsive engine.

Link to Old

Link to New

1 Like

Am i the only one setting the minimum hight and width always on Zero ( 0 ) and then always use “Fit to Content”. In the first tutorrials i saw a lot of people working with margins all the time…

It rememberes me on the “Autolayout” Hug Content function of Figma.

Also the padding inside a group is in bubble the margins of the object inside the group if i get this right.

Test Page Works perfectly fine: https://konzeptwilliams.bubbleapps.io/version-test/delete_me_empty?debug_mode=false

1 Like

is it a bug or a feature that when i set the hight of text elements to 0 that if works perfectly even if i change font size?

Was there an answer to this? Drag drop is really helpful in moving elements around groups while keeping their workflow references intact.

“Copy with workflows” is not perfect, as it anyway creates a copy of the element and we need to change all the places where those elements are being referenced.

If disabling drag-drop, then we need a “Cut with workflows” and “Paste with workflows” too to maintain all the references of the element being moved around.

1 Like

Yes.

3 Likes

Awesome! so its possible to move groups but not elements somehow.

It works with everything.

1 Like

Strange… I really tried this … seems to work now haha :slight_smile:

From all the things i’ve found i think the Fixed default is the most annoying, feels like it should naturally fall back to either row or column since it’s easy to flip between them.

I think this feels like it makes most sense, for column just put the minimum width/height on 0 (or whatever the previous fixed height was)

Then the vertical / horizontal stretch enables depending on row/column

Screenshot 2021-11-09 at 14.46.40

Also, another annoyance is how hard it is to click on the right group, ideally i would want to rightclick → paste in the sidebar since there each individual element / group is always accessible.

For example it’s hard to click on this piece of text i copy pasted in to the page because it has 0 height:

Screenshot 2021-11-09 at 14.54.32

And yeah, besides some of these tweaks the new editor is a life changer :smiley:

I activated this Engine and i dont like it at all, how to come back? How to remove engine, it killed my page…
And i didn’t toggle a check (make a copy of page)… :frowning: