New Responsive Engine [beta]: A New Way of Building Responsive Apps in Bubble
Upgrading your Page
The new Responsive Engine [beta] is currently set at the page level. To opt-in, navigate to the desired page (new or existing) and click the “Upgrade responsive engine” button in the Responsive sub tab in the Design Tab. You now have access to the new responsive controls on this page!
Pages and reusable elements not yet upgraded will carry a blue upgrade icon in the page menu.
Converting an existing page
If you are upgrading an existing page, your old settings will be converted to the new system automatically. While the converted page behavior should match that of the old page, the new Responsive Engine is based on an entirely new technology so there may be some slight differences. In addition, the undo history will be reset when the page is upgraded.
We strongly recommend reviewing your upgraded page before deploying to Live to ensure the behavior matches your expectations. In addition, convert production pages at your own risk. The new responsive engine is still in beta so there may be blocking bugs or unexpected behavior after migrating your page.
Warning: There is no way to downgrade a page once on the new Responsive Engine. There is, however, the option to create a copy of the old page in case you would like to return to that version at a later time. Selecting this option will create a copy of the page before the upgrade that can be found in your page menu. Keep in mind that this copy will not contain any changes you made to the UI after upgrading the page.
Confirmation modal when converting an existing page
Converted page layout
The migration algorithm tries its best to match the behavior of your page to the new responsive engine settings. Converted pages will generally have the following layout: Page is set to a column container layout type and will contain many groups set to a row container layout type. In turn, these row container layout types will contain the page content. This is because a column container organizes its content vertically and will expand or shrink based on its content. The row containers organize their content horizontally and allow the content to wrap or collapse as the screen resizes. In concert, a "column of rows" layout best matches the responsive behavior of legacy pages while now giving you more explicit control.
Note: Because most converted pages will now have a responsive container layout type, you will not be able to drag and drop elements to resize or re-position within a container like you're used to. With responsive containers, child elements need to follow rules as the screen or content resizes (stay aligned to the left? Stretch to fit the width?), and these rules are set in the Property Editor's Layout tab. Changing a container to a Fixed type will allow you to drag and drop again, but will not resize based on changes in screen or content.
Reusable elements must be updated separately to the new Responsive Engine as well. Legacy reusable elements won’t break upgraded pages, but will also not have access to the latest controls and might not work as expected. Similarly, upgrade reusable elements will not break un-upgraded pages, but will not take advantage of the new responsive controls and may not work as expected.
The Property Editor has been updated to accommodate the new responsive controls. Most notably, a layout tab has been added to house the new responsive controls. The Property Editor is now the same across the UI Builder tab and Responsive tab, making it easier to continue building regardless of the tab you are in.
Controls related to the overall appearance of an element. This includes the data type, data source, styles, and transitions settings.
Controls related to the overall layout of an element on the page. This includes the width, height, container layout type, page visibility, and margins.
Conditionals allow you to control how page elements behave and appear under certain circumstances. This tab remains unchanged from before.
The new Responsive Engine introduces 4 new container layout types that are available to any container element, including the page. These are Fixed, Align to Parent, Row, and Column.
The container layouts and their respective controls are the foundation of the new Responsive Engine in Bubble.
The responsive behavior of a page and its elements is now defined by the container layout type you choose. The container and its child elements will have different controls depending on the layout selected. Each container layout type has distinct behavior, so be sure to play around and choose the one that works best for your design.
By manipulating the parent container and child element controls, as well as mixing and matching container layout types, you can now build almost any responsive layout imaginable!
Incompatible with SelectPDF
Note that pages upgraded to the new Responsive Engine will not work with the SelectPDF plugin. If your app requires the use of SelectPDF, be sure to not upgrade the pages you send to this plugin to be converted into a PDF.
Incompatible with Internet Explorer
Note that pages upgraded to the new Responsive Engine may not behave as expected on Internet Explorer (IE) because IE does not fully support CSS flexbox. Thankfully, this only represents about 1% of web browsers in use today.
Note that plugins, including Bubble built plugins, have not yet been updated to the new Responsive Engine (beta) yet. While plugin elements shouldn't break any apps in runmode, some plugin elements might not work as expected on pages upgraded to the new Responsive Engine. In particular, the Draggable Elements plugin has a few known issues.