New Responsive Engine [beta] is Live!

@nick.carroll Thank you for your post. Having gone through the Bubble new responsive engine on one of my projects. I would like to say thank you guys for the great job you’ve done, but no thanks, I will not be migrating my apps to the engine. The whole thing feels like an entire new learning curve, it took me months to master the current engine and build pixel perfect pages, and all of a sudden we are meant to start again. Nope. Sorry. Nope. I would be keeping my apps in legacy mode. I hope your team doesn’t have any hopes of scrapping legacy mode, ever. Just like FIFA games, let people pick which engine they are most comfortable with. I have a project that is over 60 pages, it would take me almost half a year to migrate that successfully. No, the platform has matured far too much to take a change like this. I would like to please implore that no one makes any rash choices at your board level such as forcing people to migrate to the responsive engine. I for one, would like to point blank state that I thoroughly love your work and your company, but this new engine is not for me, and I thus will not be migrating any other project beyond the one I already did just to test out and see what is there (which set me back at least 2 weeks by the way, cos I had to deal with issues of responsiveness on mobile screens anew).
Thank you for this amazing platform. Keep winning.

Cheers.

2 Likes

Hi @nick.carroll, I am in the process of building a new app and i’m using the new responsive engine which is awesome. When will you upgrade the selectpdf plugin to make it compatible with the new responsive engine?
For those like me that are in the process of building an app, it does not make sense to build on the legacy engine and therefore feature parity across the legacy and the new engine is crucial for us. Many thanks!

1 Like

They´re actually planning to get rid of the SelectPDF plugin.

Do you know if they will replace it with another plugin then?

Don´t know yet :frowning:. Go to the latest community update but no info about it.

Have you managed a workaround for this? Page will not resize, It all depends on content height and not page height related.

I’ve been using the new responsive engine for a few days and have been impressed by the results. The videos from @jacobgershkovich are super helpful to get started.

Here’s a responsive page I built yesterday in a few hours. Previously a pixel-perfect layout like this would have taken much longer, particularly the table components and the tab sections. No group overlaps, fit to content, horizontal collapsing and snap aligning elements to the correct positions are the biggest game-changers.

A few areas for improvement:

  • Conditional margin sizes for different device sizes. Like with Webflow the ability to set margins depending on device size. At the moment I have to conditionally set individual margins to collapse at specific page widths in the ‘Conditional’ section rather than within the ‘Layouts’ section which is time-consuming.
  • Padding controls. This has been mentioned a few times so no need to elaborate.
  • The ability to preview at other device sizes apart from the pre-set ones in the Responsive Viewer. I couldn’t find a way to do this in Bubble.
  • Groups seem to randomly become ‘Fixed Width’ when grouped with other elements or when they ‘Type’ is changed. I found myself having to constantly go back to elements and change their default min/max widths after I’d already set them.
  • Change the default behaviour when a group/element is created from ‘Fixed Width’ to ‘Min Width = 0’, Min Height = 0 and ‘Fit To Content’. I found myself using this constantly with texts and other elements on the page.
  • When all elements are removed from a group, they collapse completely and become difficult to click or find. There should be better visual representation of these essentially ‘hidden’ groups as they are extremely difficult to find and cause aberrant behaviour if not spotted.
  • The migration tool is a disaster for migrating complex components from the old engine. I’m not sure how you can resolve this but may be worth adding a warning sticker to say that it may be better to rebuild the component completely as I wasted a lot of time and it was much simpler to just start again.
6 Likes

Looks nice!

Any chance you can publish the editor view to refer to it?

Thanks!

Anyone having issues with Font Awesome Icons causing an automatic line break in rich text?

Yep, just noticed this now. Definitely a bug - have submitted a report.

Has anyone else had trouble with the new responsive editor allowing tall items in a Floating Group to scoll?

In a standard page with a left pane, header, and a content box, we want to be able to scroll the content independently of the left pane and the content. This is where floating groups come in. But, right now, it looks like it’s not possible to add an element that expands beyond the edge of the page and allow the content holder’s floating group to scroll.

Has anyone else faced this?

@jess @nick.carroll @eve - it would be great to have a way to track these issues so they don’t get lost here.

1 Like

I feel same, got use to old way. So use to drag around and drop, it going take time and I have a MVP to build!!! Either this or Wix

I’m not keen either, liked the legacy. Lot seem like it maybe something I obvs don’t know need to learn. I copied my original tested the new.

1 Like

This is a bug that we are addressing, thanks for flagging!

Similar to that, items that extend in groups just overflow on normal groups instead of allowing the group to scroll. Thanks!

Please keep us posted when these things are fixed and live so we can act accordingly, it’s hard to guess or follow the release notes.

Reusables that have been converted to the new responsive engine dont seem to accept data when placed in a popup in page that has not been converted. Havent tried to place them in a popup in a converted page yet. Anyone else have this issue?

Just curious if your group is set to Column layout mode. If so, I actually submitted a bug report on that 10 days ago. I just heard back from support today that this is “expected” behavior. I was rather surprised (to put it mildly) at that response. I honestly can’t think of a single scenario where a user would actually want that behavior as opposed to either scrolling or wrapping.

I just turned around and resubmitted it as a feature request. :confused:

Yeah, it was Column.

It’s an issue because if you want the group to scroll then you’ll need to use a Floating Group, but if you want to use the new horizontal responsiveness you can’t use a floating group because you can’t set the z-axis and they’re not in the same groups.

In the multi-line input there’s an option for “stretch to fit content” if that stretch to fit content isn’t checked then the content in the input scrolls. In the new responsive editor there is a “fit height to content” and that works great. But unchecked “fit height to content” seems like it should be have like that input and allow for a scroll in the group. I understand why there was a decision before the new engine since there was no option to fit height, but now, if I have a group in a group it should behave like a floating group (which has this option), but we can’t use because we can’t set z.

@sudsy - here’s a strange workaround: if you use a repeating group, instead of a regular group (the data type is User and the data source is Current User: converted to list… it creates a single item RG. This will allow the group to scroll around the RG and fill the space.

Odd, but it works?

1 Like

Hi David,

I’m not sure I fully understand the desired behavior based on your description. Is something like the following what you’re after?

In the above example, the sidebar disappears below page width 650px. (I just chose an arbitrary value.)

1 Like