Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

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

Yes, I agree with this. I was handling image in a page few days back and faced this issue. By default the image was keeping its proportion actually. But when I was converting the page to PDF using a plugin, the aspect ratio went off. I resolved it by some hit and trial of keeping parent element row or fixed etc.

1 Like

Hi @adamhholmes , thank for your reply. I am actually using Vimeo. Can you please give me some more info about how to use the SDK in a group ? Thanks

@stefanof

Put the vimeo SDK script in the page HTML Header (or in an HTML element), and set up a group to contain the player (you need to give the group an ID attribute, such as ‘video’).

<script src="https://player.vimeo.com/api/player.js"></script>

Make sure the group has a responsive layout and is set to ‘Fit Height To Content’

Then run the following javascript, either on pageload, or whenever you want the player to appear etc. (this is assuming you used the ID attribute ‘video’ - if you used something else then replace the ‘video’ in the ‘var videoPlayer’ line with your own ID):

  var options = {
    id: 'Vimeo_Video_ID',
    responsive: true,
    playsinline: false,
    autoplay: true,
    autopause: false,
  };

  var videoPlayer = new Vimeo.Player('video', options);

note: refer to the Vimeo SDK documentation for all the player options - the above is just an example.

Using that, the video should resize in width responsively, and it’s height will adjust to it’s content, in a similiar way to how it would if ‘Keep Aspect Ratio’ was an option.

The only issue is you’ll probably want to set a minimum height on the group, if only so you can see it in the editor, in which case the video height won’t go below that even if it’s width get’s small enough that you’d want it to.

But whether or not that will be an issue for you will depend on yoru design and page settings etc.

2 Likes