New Responsive Engine [beta] is Live!

The copy of the page should be made by default, so if you didn’t touch the checkbox, you should be fine. Check your app’s page menu to see if there is a page with your current page name appended with _copy, that is your legacy responsive page backup. If this page does not exist, you can revert your app to a point in time before you upgraded your page.

5 Likes

Feature. The text element is fitting its height to the text content. If empty, the text element should collapse to its min width, which in this case is 0.

4 Likes

Are you saying that we can choose NOT to upgrade our current pages to the new responsive engine without any negative repercussions or future impacts? The new engine will not be forced onto the existing pages?

Upgrading has basically broken all of the pages I’ve spent months designing, and the thought of having to rebuild them is extremely frustrating. I can deal with building NEW pages with the new engine, but I’d love to get a clear “Your existing pages will be allowed to exist as-is forever”…

Thanks

Yes, I believe in the past they said the Legacy system is never going away, However it’s probably peaked in terms of features and upgrades, I would be willing to bet that new features probably won’t get added to the old responsive system while there is a new one.

I highly recommend watching Bubble New Responsive Tutorial - YouTube
It’s really good insight to the new system, and I had the same issue that you had, many different pages which didn’t seem to work in the new system but after playing around with it and watching that video has helped tremendously.

2 Likes

Thank you - I will check it out. Great point regarding new features and how I may be shooting myself in the foot by not transitioning to the new system.

Correct - we have no plans to force users off of the legacy responsive engine. Even if we did, I can’t imagine it would go over too well. That being said, our goal is to make the new engine so awesome that everyone wants to switch :slight_smile: A big part of that “carrot” is making the migration process smoother - which sounds like is pretty poor for a number of apps. In addition to feature requests and UX tweaks, we will be looking to make this process a lot better in the coming weeks/months. It should be noted that improving the migration process is a big undertaking, especially since every bubble app is different.

7 Likes

I totally get it. It may make more sense for me to wait until the official Version 1 release to migrate my pages :slight_smile:

Thanks for the quick reply.

1 Like

A column page container will grow as more child content is added to it. Lets say you have a column container that has a min height of 300px and a shape inside of it that is 200px tall. If you copy and paste that shape anywhere in the parent column container, it will automatically be added below that first shape and the page will increase to a height of 400px to accommodate (assuming the shapes have no margin). These shapes can be then aligned horizontally or re-ordered using the controls in the Property Editor layout tab.

Similarly, if you want to manually increase the overall page height, you can increase the page’s min height and that is what it will render at in the editor & runmode, unless you have child content that requires more space.

2 Likes

Yeah this shouldn’t happen. Do you mind filing a bug report for this? I’ll share this video with the team in the meantime.

1 Like

Done! Thanks for the response.

1 Like

Is there any way to keep element ratio when page stretching? For example we have mobile page 320px width. I put element which are 200px widht and 280px height. When I stretch the page to 400px which is 1,25x more i also would like to element have height and widht calculated 200 x 1,25 and 280 x 1,25?

For now unfortunetlly it streching only in widht not in the height :confused:

There is a checkbox to maintain aspect ratio when the element resizes in the element property editor. Which element would you referring to?

Hey @nick.carroll

I am experiencing weird flexing issues wheni have the following setup in a popup

Popup - type row - 100% width

  • sub group A - type row 100% width
    – 2 groups inside subgroup A - each a row and each 280 min pixel

the popup wont flex down to 320, it stays wide.

here is a video to demonstrate

The responsive action works as expected when I take out the two Inter groups and simply place elements.

I would like to scale repeating groups or standard groups. I know that there is checkbox only for images, shapes and icons, but also aspect ratio could be keep by integers not decimals.

Ok, nevermind. We always could do something like 10:7 and it will be ok also we could put shape behind of this group and it will be responsive based on this.

Still, I think it will be good idea to also make this possible on groups.

After trying to migrate a few pages, I think that adding an option to migrate the page “as is” would be immensely helpful. It is much easier to choose which elements should be changed from “fixed” rather than trying to extract elements out of a million automatically created rows, columns, and boxes. This would make migration extremely easy!

This should be a simple fix as you are essentially migrating all of the elements as “fixed” without changing much else. Obviously, the engines are different and it’s likely more complicated than that. However, I think this would be the simplest and fastest migration process for all users.

On another note - Is there any plan to add %-based sizing to drag and drop elements?

@nick.carroll Is there any plan to offer this sort of migration? Otherwise, I would essentially need to completely rebuild my app which is not a feasible project.

7 Likes

Apologies if someone has already asked this above. I have converted and cleaned up a couple of my pages, and have just noticed that I now have extra whitespace below the end of the page. On pages where there is no blue footer, you can see where the page ends because the page has an off white background. I’m not running in debug mode. The page is set to column, full width, no min height or width. Inside the page I have my reusable header, a group with all the content in it (no min or max height set), and the reusable footer.

I really wish we could just drag into a group and have it resize automatically to fit the item

1 Like

That should be possible with the checkbox “fit to content”.

Painful to have converted even a simple page :joy:

2 Likes

exactly! I really hate all the added rows and columns…

1 Like