New Responsive Engine [beta] is Live!

Announcements New features
204

Hey @happybuilder thanks for tagging @airdev on this! :slight_smile: Weā€™ve been participating in early trials, and think the new responsive engine is going to be a huge step forward. The new engine is more intuitive and allows for better handling of common responsive layouts, and should ultimately cut down on lots of time and hassle. Here are a few thoughts on how weā€™re approaching it. Happy to answer questions about this (including here in this thread):

  1. We are not moving to the new responsive engine yet. There are still a few open feature requests (e.g., ā€œpaddingā€ and flexbox ā€œgapā€ controls) that we are waiting on, and we want to make sure everything is stable. We have a plan in place to fully migrate and map everything across the board to the new model, but itā€™ll realistically be a month or longer to get there.
  2. In the meantime, the old responsive engine will continue to be supported, so there shouldnā€™t be any issues when using the current Canvas library.
  3. From our early tests, we believe that it will be easier for Canvas users to manually recreate more complex pages with the new responsive engine instead of converting them (for pages where that makes sense). Weā€™ll come out with more guidance on how to do this.

Overall, weā€™re extremely excited about the new engine; itā€™s a huge step up from the current one and supports new and exciting features that arenā€™t possible with the existing engine. Weā€™ll definitely keep everyone posted, but please donā€™t hesitate to let us know if you have any questions!

6 Likes
205

I have invested now a lot of hours just to TRY and convert a very simple (basically one header and two simple groups) page. At some point I had to give up. Instead, I copied the groups and pasted them on a new page with the new responsive engine. Was not straight-forward as wellā€¦

At this point I am afraid, converting one of my more complex pages will be complete overkill and weeks of work. The ā€œcopy & pasteā€ mode will also involve a lot of work.

My problem now is that I am very close to launching. I could launch now with the old engine and wait for the new engine to become more stable and convert slowly during the launch. However, since I am unfortunately only on the Personal Plan I donā€™t have multiple Dev. versions which makes things very complicated.

I think it would be great if Bubble would enable multiple Dev. versions for all (paid) accounts during the Beta phase of the responsive engine so that people can slowly transition to the new engine while being able to support the running prod versions with the old engine

4 Likes
206

Is there anyway to move elements across groups? Copy pasting breaks a lot of thingsā€¦ especially using reusable elements

1 Like
208

I am ten minutes into your video, and I am finding it very helpful. Thank you for leaving a trail after going where there was no path. I also just recommended your video to another Bubble developer.

1 Like
209

If anyone is stuck on the new responsive engine, I did a 2 hour webinar yesterday covering flexbox, a simple sign up, left menu navigation and repeating groups

The recording is now up on YouTube!

Thanks
ZubairLK
https://twitter.com/zubairlk_nocode
https://www.linkedin.com/in/zubairlk/

13 Likes
210

@toyeebgodo Glad you found it helpful :slight_smile:

211

Hey all - catching up on all of the great feedback (especially on issues around migration), questions, and feature requests from over the weekend. Will try to address them each where I can shortly. Thanks everyone!

6 Likes
212

Thanks for the shoutout @ZubairLK :zap:

I know first hand how challenging livestreams are.

3 Likes
213

Hi @nick.carroll,

Not sure if it is a bug, but looks like it. Is there a reason why when setting a fixed height with a margin:

image
image342Ɨ777 16.2 KB

Bubble sets the following CSS, which looks contradictory.

min-height: 100%;
max-height: 100%;
height: calc(100% - 70px);

The height attribute seems right, as you define a fixed height with margin, but conflicts with the max/min settings, which in my opinion should not be set at all, as height is already defined as fixed, in this case calc(100% - 70px)

214

Iā€™m having the same issue. Group focus is acting really weird ā€¦ itā€™s the main reason that I canā€™t switch my whole site to the new engine yet.

216

Very cool, thanks for sharing this CSS. Impressive that you got it wrapping nicely with so little css.

217

Isnā€™t that what the ā€˜fixedā€™ layout provides?

218

Is there a public roadmap somewhere? Internal padding and some way to specify gutters would be very welcome.

1 Like
219

No public roadmap officially, but I will be channeling all of this feedback into our ideaboard (which is public). I can say that a lot of the feature requests that have been brought up so far are totally reasonable and already on the list. The beta was meant to set a foundation for what is now possible with css flexbox & grid.

7 Likes
220

Setting elements to 100% page height - FINALLY

221

All very reasonable requests. Noting these down for the team to review.

1 Like
222

We are aware of some wonkiness going on with the group focus element and are looking into it. Thanks!

3 Likes
223

Will look into this, certainly a reasonable request!

2 Likes
224

Noting this down, certainly a reasonable request!

2 Likes
225

If anything, the new system should respond better to Custom CSS than before. It sounds like settings related specifically to viewport height donā€™t seem to be responding?