Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

Tried to find that on the ideas board but having trouble with the search. Hopefully you included direction as well. I need it slower with a direction indicator - good suggestion

Rather 9.5 times out of 10

1 Like

Hey just wanted to say ive been using bubble for a couple months now and originally really found the responsive engine off putting. I thought it was too hard to use. Grr like let me just draw what I want where I want!

But recently the concepts clicked for me and I find that yes, it is getting faster and easier for me to layout my pages and think in terms of groups and layouts and margins. Also it’s great for re-ordering things in row and column layouts. I want the form before the table on the page? Parent group is a column layout and I just need to swap the two child groups. Nice. Kudos team.

3 Likes

This is great feedback, thank you for sharing. Do you remember what the aha moment was for you? Was it a certain piece of educational content, just time spent in the editor, something else?

3 Likes

Hey @nickc! I held off on learning the new responsive engine because I felt very comfortable with the original engine.

I attempted to learn it a couple of times, but gave up pretty quickly.

About 6 weeks ago I gave it another shot one weekend. I watched this video by @lachlankirkwood1 and it was a my “aha” moment.

I can’t believe what it took previously. Loving the new engine. Huge shoutout to Lachlan. Put him on the payroll!

7 Likes

Hey @nickc - far as I can see it’s not possible to dynamically change the min width of column setting for a RG via a conditional.

This would be useful for creating this kind of behaviour for RG cells, changing from, for example, 4 to 2 columns below a certain page width.

Without this conditional the columns will always go 4 > 3 > 2 > 1

Great work on the engine!

5 Likes

Same question here! GroupFocus “Fit width to content” seems like an obviously missing feature for responsive at this point – have you figured this out, or have @emmanuel and @josh implemented this?

1 Like

@nickc
Great work on the new responsive engine!

I also want the width of column dynamically changing.
This responsive setting is very common. Is this in your plan ?

I agree it would be useful. Until Bubble provides a way, this how-to might be helpful.

1 Like

Just to say that despite frustrating issues, this new editor is the way to go, changes everything

Hi everyone - quick announcement that we just released drag & drop in responsive containers. Full announcement here: New Responsive [beta] Drag and Drop in Editor Canvas

6 Likes

Hi @nickc just saw the announcement and its great!!

Just wondering when will we have the plugins compatible with the new engine.

Thank you!!

Hello community! :wave:

We are glad to inform you that our top and the most watchable Bubble.io for Beginners Course has been revamped in accordance with the new responsive engine!

THIS COURSE IS COMPLETELY FREE

Bubble.io for Beginners Course will help you progress from basics to complex things.

  • What Bubble is and how it works
  • How to get started creating apps without code on Bubble platform
  • Fundamental Bubble functionality that you’ll need to create apps without code
  • How to create a connection between your app and Google Services and get them working.

Already a Bubble-pro? Watch it to get new insights for your current projects and Inspire yourself for new features and possibilities.

Several lessons are available on our Youtube channel as well:

Best regards,

Veronica Kornilova
Marketing Manager @ Zeroqode
#1 Bubble Publisher and Developer

logo-icon-S-circle

100+ Bubble Templates
25+ Bubble Courses
250+ Bubble Plugins
20+ Bubble Building Blocks
Convert Web to iOS & Android
No-code Development Services
Zero Code Conference Replay - watch all the no-code industry leaders share their expertise

4 Likes

The team will be converting bubble built plugins to new responsive over the coming weeks, and the updated plugin editor api that supports new responsive is currently being tested. When that is released, plugin developers will be able to update their plugins to new responsive as well.

7 Likes

Anyone figure this out yet? I have a repeating group (grid) of uniformly sized photos (200x200px). I had to set the min width of the column to 200 otherwise the photos were overlapping when changing browser window size. Now it successfully changes number of columns as I down-size the window.

BUT - on mobile, I need the pictures to be smaller and in a 2 column grid, seems like there is no way to do achieve this.

I don’t think it’s possible without some custom CSS.

Is there a way to organize the first level groups in the elements tree?

In the old engine they were organized by y axis, then z-index, then alphabetically, but I can’t seem to figure out a consistent pattern with the new engine.

1 Like

I am encountering this issue also. 2 root level floating groups that overlap. No amount of send to front/back makes a difference. Other than changing the z-index via CSS the only way seems to be the order they are added to the page, I think . Seem the first added item is on top and the second underneath. But that was under very frustrated and uncontrolled testing…

2 Likes

@nickc any insight on this? Us OCD bubblers are going crazy :joy:

1 Like

I wish it behaved like this, but In my app, in the new responsive engine, if I set the minimum column width to 25% to have 4 big images on desktop, I will also get 4 small columns in mobile and vice versa.

I don’t know if this is cause I have a RG inside anothe RG or something else