New Responsive Engine [beta] is Live!

…you can if you set container layout to fixed, @kheimstead982?

1 Like

How does the migration of existing pages work, exactly? The help guide doesn’t provide any details.

Do legacy pages become “fixed” containers, even if they were configured to be responsive before? Or are they set to one of the other options “Alight to Parent”, “Row” or “Column”?

Does Bubble add containers to the legacy pages during the migration process, or do the number of elements before migration = the number of elements after migration?

We spent a lot of time making sure each of our pages and reusable elements are fully responsive from 320 px to 1920+ px screens. We have floating groups for left and right menus, which show and hide along with their respective toggles at different page widths. I’m dreading having to re-configure everything so that it works with the new responsive engine. Also, my app is multi-tenant which means certain groups and REs are purposely hidden on page load, and then they are set to show if an authentication workflow passes. If Bubble adds containers this may mess with the authentication process.

More detail on how the migration works would be very helpful so that we can appropriately plan and make time for it (or not, if it’s not worth it).

5 Likes

Did the align text vertically + line height got any updates?

For example here i have this texts with align vertically enabled, depending on the font size & spacing, they align differently vertically.

a fix i found is setting each text to “fit to element height” and then align-items: center for the navbar container, but i still have cases where i have to define a vertically aligned text and “play” with the line-spacing values

Me : spends months learning and perfecting responsive design and is use to a certain way of doing things in Bubble.

Bubble : hold my beer.

All jokes aside, Bubble, this is huge. We’ve needed flexbox for a very long time. Thank you.

dwight

9 Likes

I think you have to:

  1. set the page to column (or align to parent)
  2. create a group with row setting
  3. inside that group, create 2 groups

4 Likes

Please is it possible to get back to the old system on my app ? I can not even move or resize anything …

If you made a clone of the old page then just, like, stop working on the new files and go back to the old ones.

If you unchecked that little box to make a clone of your page before upgrading to the beta (shouldn’t have done that) then just set everything to a fixed layout and it should behave like it used to.

Thank you for the reply, i haven’t saw the copy version.

I think I would go about it this way: video (2 min) Loom | Free Screen & Video Recording Software

4 Likes

Just want to say this is a great update and I’m going to spend the rest of this week playing in it

1 Like

Thats a good workaround! Haha i should change my user name in an english speaking forum (its my last name) :sweat_smile:.
Having 1px height i think that it gets aligned in the middle

Thanks!

1 Like

@nocodeventure, you might have already figured this out, but you can revert to a drag/drop method by changing the group containing your objects (page or actual group) to Fixed.

1 Like

@J805 , what videos are you referencing? Trying to get to know capabilities of the new responsive engine but have only seen the video above.

1 Like

@nick.carroll, are there plans to make Bubble animations interact with the responsive engine? For example, showing/hiding a group with a Toggle action works, but a slide out animation only animates the elements in the group but doesn’t actually animate the group itself on a responsive page until the group is hidden.

Responsive Sidebar

4 Likes

I loved this Bubble update, and it’s really useful, but in my view, it’s only useful for pages built from now on. Existing pages could continue in the old responsiveness engine without affecting anything, even if Bubble gave up working on the old engine.

I say this because like you, my platform is rental and the pages are TOO complex to be remade. It is suggested to keep the current engine for whoever wants, and encourage the new engine from now on.

2 Likes

I went to a live session with Nick from Bubble and watched him work. I will see if I can create some videos soon to share the knowledge. :blush:

5 Likes

I loved this Bubble update and it’s very useful (it’s 100 times better than the old engine), but in my opinion it’s only useful for pages created from now on. Existing pages could continue in the old response engine without affecting anything, even if Bubble gave up working on the old engine.

I say this because my platform has VERY complex pages to be remade. It is suggested to keep the current engine for anyone who wants to, and stimulate the new engine from now on. What do you think? I wonder if anyone else shares that opinion. :slight_smile:

Note: I say all of this without knowing the impact this would have on Bubble both in cost and in programming, so forgive me if I’m talking nonsense.

  • Keep both options forever and encourage use of the new engine
  • Keep both options for a while and then fully migrate
0 voters
2 Likes

Oh, nice. That’d be awesome, @J805! Bet seeing that from an expert was really beneficial.

1 Like

Love the new update this will be a game changer for me.

One issue… I’m struggling with understanding how the min width and max width should work. I created a new topic if anyone has any suggestion or thoughts to help me out.

1 Like

Just had a quick play and I think the concensus is;

  • Fantastic for newly created pages and reduces the learning curve for new users.
  • A disaster for pages that exist already, would take many hours for a single page to be bought over to the new reponsive engine.

Great work Bubble dev team, another brilliant feature. Cant wait to see what’s next!