New Responsive Engine [beta] is Live!

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! @nick.carroll

Hey @nick.carroll :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 @nick.carroll 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

I miss this feature too

1 Like

Well, in case you missed it, here’s a working example.

-Steve

Hi guys! Just a question, I believe I read it somewhere but, are plugin elements planned to adapt to the new responsive engine? If so, is there a timeline for this?

What I mean is that, when drawing an element from a plugin, the sizing options are the same we had on elements on the old engine.

For example:

and the options for responsiveness inside the plugin editor are the same:
image

Regards!

No timeline but given what Nick said above, we should expect it pretty soon?

The responsive engine is awesome!

As a non Elementor/non CSS/non Webdesigner (xD) user, I have a question about the best practices ppl use when designing a new page.

Is it wise to set the page layout to Column, then generating a series of Row containers as wide as the parent page?

Of course, each case is a case, but is this a good default starting point?

Ty! :sweat_smile:

This was exactly the post I was looking for… Thanks! hopefully we get this soon :slight_smile: