New Responsive Engine [beta] is Live!

lois.laput · 2021-11-06T10:19:08.430Z

THIS!! Group Focus is broken >.< Though I just used a regular group and set relative to parent group. Kinda gave the same result without the automatic closing when clicking outside the group.

hello.plannwin · 2021-11-06T11:54:06.008Z

recommend not to migrate a large page. It’s a lot of work to basically redesign everything. Plus the load time (version-test) is very very slow.

rpetribu · 2021-11-06T12:10:20.894Z

Yes!!! Migration is a nightmare. The best thing to do is build again from zero, coping and pasting the elements and groups from the old version into the new one

buero · 2021-11-06T12:32:24.306Z

Love it

Will the figma autolayout function also be integrated with bubble? They look so similar and this can be huge for bubble to focus in the userbase of figma here…

The import is already there so do you guys have plans on this?

J805 · 2021-11-06T14:13:04.799Z

Matthew McGowan:

Also, in terms of the properties to change on our conditionals, it would be optimal to have access to all of the formatting options. As of right now, the only Layout properties we can change conditionally are the margins. It would be very useful to have access to all of the layout properties from the conditionals…having access to them will enable us to create layouts that don’t require ‘duplicated’ elements when the alignments need to be adjusted.

This is exactly what I was looking to do yesterday and was surprised that we couldn’t do. @nick.carroll is this something that can be added?

sudsy · 2021-11-06T16:09:23.800Z

jacobgershkovich:

wrap property instead of scroll

Yeah, we get this out of the box…

grid-h-scroll

But with a minor CSS tweak, I got this…

rg-flex-wrap

@nick.carroll, RGs seem to support CSS grid and not CSS flex. Am I missing a setting somewhere, or is flex simply not supported for RGs? A trivial tweak of 2 CSS properties allowed me to get the above wrapped layout, which would be oh so useful in many situations.

Any chance this can be added (or fixed)?

jennifervasilenko · 2021-11-06T16:46:30.192Z

This is a cool design opportunity!
Just perfect !!!

But I noticed some bugs, for example with the Focus group. Its use in a new responsive is impossible. It is not positioned and when you try to delete it, it still remains in the editor, disappears only after the update.

boston85719 · 2021-11-06T17:13:48.967Z

@nick.carroll

Wondering if there is a way to get more controls to allow us to have complete control over how our elements interact with each other inside of their container as it relates to which will collapse it’s width first before the other element begins to collapse its width.

Here is a video demonstrating the issue I am experiencing with ideas on the types of controls that would allow me to get the desired behavior.

Another feature request would be to add another option for max/min heights…instead of just the two (px) and (100% of container) it would be awesome to have 100% of viewport. Also would need an option to add scrollbar on overflow.

In the past the way to get a scrollable side menu without a plugin was to use a floating group set to float relative to Both and make it the same height as the page…this doesn’t seem to work any longer in the new system. The other method was to use some custom CSS, which it seems the new system doesn’t allow the custom CSS to be applied for setting things to 100% of viewport.

alejandrowunderlich · 2021-11-06T17:30:44.690Z

Pretty rad. Can you share how you got this and the CSS?

luc.simp · 2021-11-06T18:29:21.433Z

I’m excited to try the new features but in the meantime I’ll be cleaning the huge mess the migration tool left behind. I could see this being very useful for new pages, but it totally destroys existing pages, and the loss of drag & drop is a huge miss.

digitalmnz001 · 2021-11-06T19:14:05.546Z

I hate really really hate this!
this new engine destroys my app that i built for months!!!
how can i just go back to the Previous version?!

sharma.himanshu0608 · 2021-11-06T19:20:30.032Z

When you upgrade a page to the new version, Bubble creates a clone of that page with the old version settings. So your app is safe!

Pat · 2021-11-06T19:28:51.724Z

after converting the page I have tons of “Rows” and the engine is extremely slow…

ed727 · 2021-11-06T20:43:30.086Z

rpetribu:

The best thing to do is build again from zero, coping and pasting the elements and groups from the old version into the new one

Exactly what I’m wondering. I haven’t tried to transition yet, but I’m curious which is better – to build clean in the new responsive engine, or to transition the page and then figure out the problems.

eLPDev · 2021-11-06T21:37:31.585Z

@ed727 I’m guessing it will largely depend on (1) how you’ve built your page and (2) how well you’ve configured it to work in accordance with the previous responsive engine.

I struggled with the previous version and worked in a number of “hacks” and “good enoughs,” so I’m betting mine won’t transition too well.

technoswift · 2021-11-06T23:46:29.986Z

quick question
How do we decide to use conatiner layout as a Row or Column ?
Any article on usage of Row vs Columns will be great as well.

hello.plannwin · 2021-11-06T23:53:24.624Z

Hi Guys,

Is groupfocus completely broken? Can’t seem to show it.

technoswift · 2021-11-06T23:53:48.262Z

Please try to make a video on when to choose Row vs Columns, for non CSS people this is difficult to visualize.

J805 · 2021-11-07T00:07:39.553Z

Sounds good. I will try to make a video as soon as I can.

celob185 · 2021-11-07T01:28:45.371Z

Would love for people to build more example of SAAS products, please