Forum Academy Marketplace Showcase Pricing Features

Resp Eng : Does Bubble not have a way to reorganize hierarchy like other app editors?

Question
#1

Sorry, new here. Came back to try Bubble since they added new Resp Engine. Could not find a post talking about this:

I cannot for the life of me figure out how to rearrange the elements in the elements tree like you would in FlutterFlow / YCode / AppGyver / etc…

Here are examples images from them:

Flutter Flow (Arrangeable)

FlutterFlowTree
FlutterFlowTree602×1366 45 KB

YCode (Arrangeable)

YCodeTree
YCodeTree514×1262 32.2 KB

AppGyver (Arrangeable)

AppGyverTree
AppGyverTree544×718 24 KB

In tutorials experienced Bubblers seem to know the secret sauce to dragging elements on the screen to put them in and out of groups.

But I am creating a layout in the new engine. Somehow in trying to drag things around in the editor to create a hierarchy, some groupings work and others completely fall apart and get orphaned.

I’m trying to drag a button back on a row group so it will side by side with an input field and I cannot find which magic pixels will accept the button back into the row.

I can’t rearrange anything in the element tree that unlike the other app softwares seems to have no intention of being able to let you re-order things clearly. So far I have to multi-select them, select ‘ungroup’, erase the Row or Column container. Then multi-select and group them into a new one then set all my container settings all over again. Then if I drag wrong later and one thing gets orphaned I have to do that all over again.

Are there at least buttons or right-click options some where where I can multi select 2 things and have the second be a child of the first?

Does Bubble have any plans to have a clear way to re-order and change parent-child relationship that is clear and objective without dragging things around over and over on the edit screen crossing my fingers I will find the magic way to have them go in the right group again?

OR, obviously if they have this already and I am missing it, may someone explain where it is? They have the ‘make first’, ‘make last’ obviously to rearrange elements WHITHIN a group, but I need to change the parent-child relationship.

Am I the only person that gets my elements completely out of shape as far as groupings when I drag to the wrong spot?

Thank you for any help.

  • Chris
#2

You can’t rearrange elements via the elements tree - at least not yet. I suspect it’s on the list of editor improvements to make; but for now, some of the ways to rearrange are as follows:

  • Copy or cut the item you wish to move. Then select the desired container via the elements tree (or the element selector in the top menu) and then paste.
  • Drag the item to the desired container (which can be tricky depending on nesting).

If you just want to move an element to a different order within the same container, then use the buttons on the Layout tab of the property editor.

Perhaps someone else has other suggestions.

-Steve

#3

Much appreciated , Steve. The cut and paste was the magic sauce for now! Just tried it with my orphaned button and that finally got it back where I needed it. The cut and paste will have to be the solution for me until Bubble adds a true arrangeable outliner. But at least this makes things usable.

The ‘drag the item to the desired container’ at least in the new engine is the core of my problem for now. I spent 20 minutes last night trying to drag my orphaned button into the row it used to live in. Could not find a draggable area where it would go back in the group. Where in FlutterFlow/YCode/AppGyver/Webflow/etc, it would be an after thought to go to their tree and simply rearrange it the way it should be. And better yet, in those builders things don’t get orphaned in the first place by bad dragging in the edit window.

1 Like