Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

I’m finding it extremely frustrating converting my single-page application with lots of reusable elements over to this new responsive engine.

Has anyone started this yet or have any advice they could possible share on best way to structure a page to implement lots of reusable elements.

Any help would be much appreciated!

Kind regards

From a very frustrated bubbler.

At this stage it’s relatively clear that there’s a number of bugs/issues around popups, repeating groups and group focus.

Best to start with super straightforward reusables that don’t use any of these and then wait a couple of weeks for them to iron things out before tackling more complex resuables.

I’ve found that even simple reusables have added unnecessary groups when converting so you end up kind of pulling apart any group structure you had before and rebuilding it, then dragging the elements back into these new groups.

Not a super clean experience but I think we all appreciate the value that flexbox will bring long term.

1 Like

Super excited for this! Started switching over my popup to the new editor but getting massive issues, I definitely think you guys should have released some more tutorials before launching because I have no idea if it’s me not knowing how to use the new system or the new system not working for certain use cases. I think there are some serious bugs with pop ups, ignoring the min. height is an issue. also trying to get the popup to grow based on a full list inside of it.

I’m getting a strange message as an ‘issue’. Looks like it is trying to dictate to me where I can or can not place a floating group.

Just figured out why this is. I had a group element that was placed inside of a container. I then used the ‘replace’ feature on the group element to turn it into the floating group. This did not result in an automatic move outside of the container.

Since a floating group can not be placed inside of a container, that is what the issue actually was. Once I moved it outside of the container the issue went away.

Thanks for sharing that. It was helpful to see it as it helped me isolate the reason I wasn’t able to get the floating group to have a sidebar applied automatically.

Now, I am having to deal with the issue of the repeating groups that are inside of the floating group not displaying properly.





No issues with the RGs when they are placed onto the page directly. Not sure at this stage if I am supposed to change the settings on the repeating group elements when they are placed into a container (doesn’t seem like I should have to as a page is a container) or if it is a Bug.

When first testing this out with the RGs on the page directly there was a Bug which was adding an iFrame to the bottom of the page for some reason, which has thankfully been resolved, but still stuck on this trying to get the sidemenu to function as I need it with RGs of dynamic content.


1 Like

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

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

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

1 Like

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

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

@toyeebgodo Glad you found it helpful :slight_smile:

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

Thanks for the shoutout @ZubairLK :zap:

I know first hand how challenging livestreams are.

3 Likes

Hi @nickc,

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

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)

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.

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

Isn’t that what the ‘fixed’ layout provides?

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

1 Like

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

Setting elements to 100% page height - FINALLY