New Responsive Engine [beta] is Live!

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

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?

1 Like

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?

3 Likes

 

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)?

24 Likes

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.

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

4 Likes

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

1 Like

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.

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?!

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!

1 Like

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

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.

@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. :sweat_smile:

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.

Hi Guys,

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

1 Like

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

3 Likes

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

Would love for people to build more example of SAAS products, please :pray: :blush: :cry:

1 Like

@celob185 What do you mean?

1 Like

I’m happy to have a chat, I might be able to help.