Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

I hope that this is referring to element templates and not reusables.

I think I see what you mean. I can say that my first impression finished up with an “impossible to build with the new engine”, second attempt and “nah, is not ready yet”.

Finally, a few attempts and days later I got it, and I think the new engine is just incredible, much more powerful in every single way, that is easy to miss in a single sight. Is not only the responsiveness of the elements, is that building and modifying an existing design is just incredibly faster than before, just because you can move/add/delete elements in a second without having to resize and adapt all the elements surrounding.
And still, I think it is not ready yet, but I came up to the conclusion that the problem is the tools/settings for editing the page, which causes huge problems even to make simples things, is difficult to understand and very frustrating sometimes.

I think the main pain points are:
1) Left element’s tab options, it is not fully functional: It just needs to allow the same full right-click options as the page does. Because right now, you need to go to the elements on the page to get the full options, and since groups can be impossible to select due to the responsiveness and elements underlying, you need to keep playing with the size of elements continuously just to do right-click to some element.
2) Left element’s tab drag a drop: If it would allow moving elements between groups, it would just remove all the pain from the page.
This point and the previous one, I think are the key functionality and reason to be for an elements scheme/tab.
3) Default elements settings: just to allow to define default settings for new elements for important things like container type, width/heigh fixed checkbox, fit width/height to content. New responsive engine is much faster for building a page, and still, I think that more than half of the time you spend with it is checking/unchecking and changing all the properties that the editor keeps forcing to set on a fixed behavior.

  • Bonus point here: right now every time you regroup elements, the editor changes properties to the inside elements to fixed behaviour, for extra pain.
  • Regarding the reusable elements, the existing “reusable elements” is a different thing that has an important reason to be, as a header/footer, popups… so you can access certain pages/layouts/UX from different pages and places, to simplify/economize the design.
    I think you mean some kind of elements templates, so you can save some elements with certain properties to use them later. That would be nice to have, but with some default settings customization, I guess would be enough.

I’m not an engineer/programmer, so I’m taking the risk to get things wrong here. But holy cow, I see that the new responsive engine is much more powerful and has some huge advantages even now, with these major pains and chaos, and I can only put all the bets in this new path, and hope for these dysfunctions to get improved in the near future.

Cheers!

6 Likes

The width of the site cannot be changed from 992px after installing the Responsive Engine.Does anyone know the solution?
Thank you.

If you’re creating from an existing page it resets the page width to a fixed number. Go back to the UI builder and make sure the page itself isn’t set to fixed.

2 Likes

I got it!
It will take some time to get used to it :sweat_smile:
thank you

Hi everyone, quick feature update!

You can now animate the horizontal collapse of a group like you would the vertical collapse with the new Slide Left/Right animation style option (see below).

20 Likes

Very nice! Keep em coming!

There is a big library of templates available on the template marketplace, and from what I can tell some template developers have upgraded or have plans to upgrade their templates to be compatible with the new responsive editor.

When looking at the marketplace and scrolling through available templates, it’s impossible to tell which ones are compatible with the new responsive editor without requiring a page by page manual update. Are there plans to add filters by old and new editors for templates or something similar?

4 Likes

Hey all, quick announcement! We recently launched the ability to group elements directly into responsive containers in the new responsive engine. You can access this feature from the context menu accessible via right click, the Edit menu, and the Arrange menu while selecting multiple elements on a page that has been upgraded to the new engine. Elements now retain responsive properties when placed into non-fixed groups, and non-fixed groups are by default not fixed width. We hope this helps with the experience of more seamlessly grouping and designing layouts in your apps.

19 Likes

I noticed this yesterday. Nice!

FWIW, the word “elements” could probably be omitted from the menu items, as that’s pretty much implied by the context. (Bubble seems to suffer from excess verbosity throughout the UI.)

3 Likes

Been using this a lot. Very useful, thanks!

2 Likes

Nice! Now would be a good time to look into the Drag drop plugin vs the new responsive engine. Does not work well together :open_mouth:

2 Likes

Trying to build with the new responsive engine:

Day 1: “Bubble you monsters, how could you do this to me!!!”

Day 7: “Hey babe… come look at this thing I did.”

Day 14: “A WHOLE NEW WORLD…” :genie:

Once you learn it… you’ll love it! Thanks Bubble Team!!!

11 Likes

This is awesome, this will give a much more native page switching feel. Sweet! @nickc

Hey @nickc :wave:

I noticed the update banner at the top when you push an update in bubble doesn’t look like it is responsive when the page is converted. I checked on my phone and the text is off to the side.

Anyone else see this?

Yes, I noticed that as well. Seems worthy of an issue report, but I haven’t taken the time. I always re-style that banner with custom CSS anyway, so I was planning to address it there.

This was thus far my biggest pain point with the new engine. Thank you for shipping a grouping enhancements! Grouping stuff was so annoying!

1 Like

Just a note to say THANK YOU SOOOOO MUCH for this new engine! Once you get the hang of it, it’s just life changing. Y’all rock ! :heart_eyes:

10 Likes

Hi,

I am working on a Bubble video course app and I have a question about the standard video player element. All my pages are using the new responsive engine and it seems that there is no way to make the video player responsive as it should. I attach a couple of screen shots but I have played around for a while trying all the possible options (including embedding the video in an HTML element, which is worse).

Here is an example of setting min and max width and height, which is rendering only the minimum sizes.

I think that what is needed it’s an option like “keep the element aspect ratio” available for images and shapes. Anybody has been facing (and has solved) this issue ? Maybe @nickc can help or maybe let us know if this is on the roadmap.

Thanks

3 Likes

I agree with this 100% - ‘Keep aspect ratio’ seems like an obvious and necessary option for a video element - hopefully it will be added once the new engine is out of Beta.

As far as workarounds go, it depends on what videos you’re trying to play… In my case I’m using Vimeo videos, so it’s possible to use their SDK and display their video player in a group element, set to ‘fit height to content’, which (more or less) works fine.

For YouTube, or other video sources you’d need to look at what options they have specifically to see if you can do something similar.

But hopefully the option to set Video elements to ‘Keep Aspect Ratio’ will eliminate the need for this and keep everything inside vanilla bubble.

1 Like