New Responsive Engine Feature Request

boston85719 · 2021-11-08T16:25:19.333Z

As we all know the new responsive engine is in Beta…this means it is still missing some features that are planned, and that in turns means the community testing it can chime in with feature requests for Bubble to consider. Also, we all likely know that the ‘idea board’ could be improved and might not be the best way to request features for the new responsive engine specifically.

In my testing I have come across some things that I feel are missing and thought it would be a good opportunity to create a thread that others can add their feature requests to, or +1 or like other feature requests others add to this thread. This is in hopes that it would make things a little bit easier for Bubble to see what the community is requesting.

@nick.carroll hopefully others will add their feature requests to this thread and it will make it more manageable to sort through all. So far it seems the announcement thread is filling up with a lot of questions, issues and feature requests, so figure something more dedicated would help out.

boston85719 · 2021-11-08T16:26:39.169Z

First request I would add here is to bring back to the text element the shrink elements height option, but could be used a bit differently than it had in the past.

To demonstrate the use case I made a video

Loom

Responsive-engine-new-test | Feature Request Shrink Elements Height

I personally feel it would enable use to incorporate responsiveness, page breaks etc. in our Styles, specifically on Text elements.

boston85719 · 2021-11-08T16:31:17.694Z

Change the default size of elements from 400px to 280px, 300px or at most 320px

Loom

Responsive-engine-new-test | Default Size

boston85719 · 2021-11-08T16:33:41.033Z

New Responsive Engine [beta] is Live! New features

@nickc Wondering if there is a way to get more controls to allow us to have complete control over how our elements interact with each other inside of their container as it relates to which will collapse it’s width first before the other element begins to collapse its width. Here is a video demonstrating the issue I am experiencing with ideas on the types of controls that would allow me to get the desired behavior. Another feature request would be to add another option for max/min …

New Responsive Engine [beta] is Live! New features

@nickc can there be a feature added to allow the margins to be dynamic? I know we already have an ability to set a margin property to be a different set value in the conditional tabs, which is great, but that is still just allowing us to say go from 20px to 10px in one fell swoop. Would be great to set the margin to be dynamic to say it is originally 20px and it will incrementally be contracting from 20, to 19, to 18 and so on, so that it moves and shrinks the same way normal elements would. A…

jameore · 2021-11-08T17:47:13.826Z

100% on this Matt

@nick.carroll we need granular defaults addressing as this is impacting on build QC.

nick.carroll · 2021-11-08T18:06:50.411Z

Thanks for firing this up, will keep a close eye on this thread

jameore · 2021-11-10T07:40:07.874Z

@nick.carroll

2 more fundamental requests from a UI/UX perspective

Padding controller

req1366×768 95.4 KB

Font awesome updated

req-21366×768 82.6 KB

Font Awesome

Bruno27 · 2021-11-10T09:05:45.160Z

I completely agree with you @boston85719
This option is also very useful to lower the number of element in a page because it works very close to the collapsing height for a group option!
For example i create all my buttons using a text and i show and hide them using the shrink elements height plus a condition instead of using a button into a group and then collapse the group height on a condition!

vlebert · 2021-11-11T09:42:33.515Z

Hi

Playing a bit with new responsive system, I have one suggestion: It can be quite difficult to draw new elements, or move existing element to a group when you have ovelapping groups (let’s take for exemple the Tab layout template which I had to convert to the new responsive system).

It often goes to the wrong group. It is also a pain when you are converting pages from old system to new system and you want to simplify a bit the result by deleting/moving groups.

One usefull feature would be the possibility to assigne an element to a specific group by right-clicking in the element tree. What do you think?

celob185 · 2021-11-11T14:04:54.081Z

I think there should be a keyboard shortcut to search for elements and then add to specific group.

alxgrepe · 2021-11-11T14:25:26.298Z

I agree that a new way to move would be welcome - personally I’d love a drag-and-drop in the elements tree. My workaround, which works quite nicely now with this engine, has been to cut the thing you want to move, click the group where you want to paste it and then paste to locate it inside the group. Does that work in your scenario?

socialrepublic · 2021-11-11T14:46:20.632Z

How about if the element tree has the option to ungroup an element or group?

Currently you hve to click on the group to do this, but if they are nested, it’s tricky.

boston85719 · 2021-11-11T15:48:37.096Z

socialrepublic:

How about if the element tree has the option to ungroup an element or group?

YES!

I had submitted a bug to support regarding the fact that when you have nested elements (especially when the child element fills the entire parent element and therefore parent element is not accessible via the design canvas) and you hide them from the element tree and subsequently click into what you would expect to be the parent element on the design canvas, it is still selecting the child element.

The response from the engineer was helpful to understand why this actually expected behavior

Upon further investigation, I’ve found that this is expected behavior. In the new responsive engine, we purposefully do not remove hidden elements by default as that can effect positioning of other elements within the same container. In order to replicate the “Hide” functionality of old responsive, you can instead check “Collapse when hidden” on the element you are trying to hide. This will remove it from the canvas when hidden.

The instructions they provided do work, however, it does add extra confusion for anybody unaware of this, and adds extra steps that may not be necessary plus the fact that it could actually cause disruption to your design as the collapse height when hidden may not be desired and could easily be forgotten after making the change only to be able to select multiple elements and group them in a group.

In the original responsive engine I always made use of the multiple selection of groups with a right click to ‘group elements in a group’…

I believe a great feature to add would be to make it possible to select multiple elements from the element tree and right click to group in a group from there, instead of needing to do the whole process of checking the ‘collapse height when hidden’.

socialrepublic · 2021-11-11T16:28:23.320Z

@boston85719 Thanks for that bug report.

My situation is that I have The Mother of all One Page Apps which I have converted to the new responsive beta. It has lots of groups now, many added automatically, some of which only hold one item and are candidates for removal after checking they have no sates and conditions…

I was working on the performance of the page and one thing I need to do is cull as many elements as possible to simploify things and make it lean.

I think I get what is being said about hiding rules being replaced by collapsing elements. Duly noted.

boston85719 · 2021-11-11T16:59:23.696Z

Yeah, your feature request is to allow us to select an element from the editor tree and ‘ungroup elements’…I’m basically saying yes because it is just the inverted concept I would like to see of selecting multiple elements from the element tree and ‘group elements in a group’.

I just think if they would be doing one, the other should be capable of being implemented as well.

socialrepublic · 2021-11-11T18:00:09.299Z

@boston85719 Ah. I see what you mean by inverted concept. This is true. I was looking at it much more simply … if it is on the right-click menu for a group, why not ‘just’ add the option to the right click of the element tree.

Another request … at risk of revealing a lack of understanding of the new Responsive Engine. ‘Horizontal stretch’ seems to be justified to the left and cannot be changed. I need images and groups to expand / contract within limits and to be centred. If I use ‘horizontal stretch’ the image or group is left hand justified if the parent gets bigger than the max. I’d like to be able to configure horizontal max to be left, right or centre justified.

j.poolman · 2021-11-11T18:03:15.340Z

I am missing the copy format. We had that in the old engine with the right click. I hope this is temporarily.
Screenshot 2021-11-11 at 19.02.17

w.fly · 2021-11-11T18:10:12.137Z

This would be ideal.

vlebert · 2021-11-11T20:12:32.868Z

Hi alxgrepe

Cut/Paset can do the trick sometimes, but when you have workflows and you don’t want to destroy them by cutting, anotherway of moving groups would be welcome

socialrepublic · 2021-11-12T11:53:26.229Z

‘Select parent / child’ is on the ‘Appearance’ tab.
I find I need it most in the ‘Layout’ tab.
If not moved, then a copy would be cool.