New Responsive Engine [beta] is Live!

Wait… … … … … … . What? This should be on the front page of the documentation in all capital letters. I just tried this on a PC using CTRL and it didn’t work. Is this a MAC only feature?

Where we can report bugs?

:warning: Group Focus in the new engine is catastrophic! Super buggy!
:warning: Maybe is part of the first bug, but when creating reusable elements and using Group Focus as we used in the old engine is just not working properly…

1 Like

Yeah, I’d been using Bubble for a while before I discovered it, but it’s right there in the editor help menu…

3 Likes

I agree, it’s super important. I think discovered it watching videos about bubble on YouTube. Actually, @sudsy I don’t think it’s in the shortcuts list on bubble.

I actually use a Chromebook, so for my is my special “everything” button. Perhaps try using you windows key and then clicking (but it’s supposed to be the command key). I think i usually have to double click as well.

1 Like

It’s there for me - both Mac and Win…


 
 
However, I’m not entirely sure which key maps to CMD on Windows. :neutral_face:

EDIT

BTW, what’s really nifty is that it’s not just one level. It cycles through the element hierarchy with each successive click.

4 Likes

1 Like

The issue is with the containers children (your form), at 00:27 there is a splitsecond where the children group is visible, and its filling out to the right. Try setting min width to 0 and max to inf of all children elements.

1 Like

It seems re-usables created in the new engine, still out of their Group containers.

This has made my approach to building apps unworkable, as I generally stack a bunch of groups at 50px high and embed the re-usable in the group and hide & collapse as needed.

I assume this is a bug ?

[ISSUE] Why when I group two elements in a group, bubble create the new group with fixed width and convert the child elementes to fixed width too?

I tested a bit with the new engine. I guess that if you start from scratch and you have the hang of it, it will be working perfectly. But I am experiencing som major problems. If I change a complicated page to the new engine, I only see dimensions of the main containers. All other elements have no dimensions anymore, they only have minimum dimensions. So basically if I don’t have an exact copy of the page next to it on my screen I have no idea how pixel perfect the original page was.

Is this really the way? Forget about pixel perfect positions and dimensions? I can live with that but it means I have to spend days again to go through all my pages. Or am I missing something and elements do still show original dimensions?

Another feature what seems to be missing is to copy and paste the formatting. That would save tons of time. I thought it’s the copy style function but that doesn’t do anything with the formatting.

2 Likes

Freehand drag-n-drop Legacy responsive is good for no-coders to start - its better to keep it that way. Legacy also encourages freehand designing, so bubble should also consider moving in that direction, instead of boxing out all the ideas in rows and columns.

Row/Column boxed New responsive is good for coders and is good for sure.

I could switch to new responsive (with the help of old dusty calculator) being a no-coder since i started on Legacy responsive,
There needs to be some better placement in Appearance/Layout/conditions
it sorts of stop the flow of hand, I hope bubble team will eventually improve on it.

I have figured out why there is whitespace under my page… my Group Focus items that are attached to my navigation header are appearing down there. If I open each menu, the groups go back up where they are meant to be and the space disappears. I’m not sure if this is the same issue others are reporting with Group Focus items.

I had been hoping for this for a few years. Now that its here I am glad I copied my site before trying it. I’m sorry but its not doing it for me. Trying to recover my design from the copied site is proving very hard. The fundamental problems are:

  1. CSS containers are visual elements to help you position things but Bubble groups are data elements. When you start using bubble groups like CSS containers your access to the parents data type gets messy. WE NEED A NEW CLASS OF PURELY VISUAL ORGANISING WITH NO DATA CLASS BUT INVISIBLE CONTAINERS. Data goups or other elements would fit inside the containers.
  2. In CSS it’s easy to see in the code whether you have a row broken into columns or a column broken into rows. THE NEW PURELY VISUAL CONTAINERS NEED TO BE CLEARLY ROWS OR COLUMNS AND THEY NEED TO BE STACKABLE/ NESTABLE.
  3. In CSS you can layer things by setting the z-value. Here’s its very hard to visually determine what is bound to what and what layer its on.
    I am afraid Bubble is running the risk of creating a no-code environment even more complex, arcane and difficult to use than a coding environment.

Another bug regarding the new responsive engine. I have now spend roughly 50+ hours converting all my pages to the new engine. So, I do have a bit of expierience now.

Bug with Repeating Groups:
When you uncheck “set fix number of rows” it seems the RG is turned into an infinite repeating group. Even though, e.g. I have a filter (on the search) which limits the number of entries to lets say 5 it shows 100s of entries in the editor. Now that would not be a problem if, for whatever reason, the editor would not immediately become extremely slow (i.e. delay of 3-4 seconds after one click)

Connected to that: Why can’t we (like with the old engine) define the number of rows and STILL enable vertical scrolling? With the new one, that option becomes only visible after unchecking the above mentioned setting. This cannot be intended? What if I want to have a RG with 5 rows (100s entries) which is scrollable? Yes, I could play around with the height but I much more prefer the legacy solution.

P.S. Also, let me say that just converting legacy pages to the new engine is crap. Even with simple pages. After converting you get an extremely “messy” page with 100s of “Rows” and the editor becomes super slow. I have now manually created a new, blank page or reusable element for each legacy element. Then I copy the old element to the new engine. Still a hell lot of work. But better than the bubble solution.

Another note: Never has the editor (even with “vanilla” new responsive engine pages) been SO slow.

To end on a positive note: The new engine gives so much more flexibility and power. Much easier to build beautiful pages IMHO.

4 Likes

This is great feedback, thank you.

1 Like

Definitely here you on the difficulty of adding new elements to a page that is already “full”. We will be working on some UX improvements to make that process easier.

Min height defines the shortest height this element is allowed to get. For example, if you have a group with no content inside, but a min height of 100px, the group will render at 100px. If content is added that needs more space, the group will grow accordingly, within the bounds of its parent container and any max height settings. Max height defines how tall an element is allowed to get. If left blank, it will grow as tall as its parent container will allow it to grow.

Regarding your question on group scrollbars with overflowing content - not yet, though it is definitely a reasonable feature request!

Do you mind sharing more details or a repro case on the “Group B is not an option issue”?

1 Like

I can’t give you an estimate on timing unfortunately, but I can tell you that we do intend to support all layout controls in conditionals. This can quickly become cumbersome when designing, however, so the real win would be fully supporting breakpoints. At each breakpoint, you set your layout settings in the PE and smaller screen-sizes will inherit those settings unless otherwise specified. This scope of work is currently being defined :slight_smile: .

8 Likes

We do show the current screen size in the responsive tab in the left toolbar right underneath the elements tree.

Screen Shot 2021-11-12 at 10.48.57 AM

3 Likes

Question about this - if we have an updated page and use a reusable element (pop up) that isn’t updated is that an issue?

I have a test page that is the updated engine and it has a reusable element on page that is a pop up, when live and the pop up is pulled up, no content is shown - but when I use the reusable element on a legacy responsive designed page it shows data.

1 Like

I’m running into the same issue here. I agree that adding an Edit or Select option to the menu would be really helpful.