Layers and the new responsive design

Hello!
I am working with the new responsive design and I was wondering if there is any way to have a group on top of another group?
With the previous engine, layered design was very straightforward. But now due to the fact that edges snap together i don’t see an obvious way to do it.
Don’t get me wrong, i absolutely love the new engine but I cant believe that it can’t support groups on top of each other! Its very important functionality.

3 Likes

Why do you want a group on top of each other?

There are a few scenarios, but one that im dealing with now is a group containing explanatory text which appears when an element is hovered. This group will appear below the element and will appear on top of another group.

I’d like to overlay floating groups on top of existing elements but can’t seem to make that happen

Use a group focus element for that :slight_smile:

Groups are not meant to be ‘stacked’ on top of one another. You will have responsiveness issues if you do that.

You either nest them, or you have the top/bottom edges touching and show or hide (and use collapse when hidden) depending on conditionals.

Have a look at Group Focus elements.

I’d like it to float relative to bottom of page but on top of elements, somewhat like this:

That’s a floating group element :slight_smile:

1 Like

I’ve actually had a few situations where bubble restrictions made it necessary. Take the input field for example. If I want to start a workflow when the input field is “activated”, I can’t do that.

With the legacy engine I would put a transparent group on top of the input field, so when users clicked that group the workflow started.

But otherwise I completely agree

I agree on this. There is no other way to to build large one page apps than stacking groups on top of each other.

There are no responsive issues on legacy engine if groups are aligned correctly and hidden when they don’t need to be shown. I have apps that have 30 groups stacked and it works fine on the old engine.

Group focus elements would solve this issue perfectly. It would even be better than adding conditionally hidden groups because you can set their offset. However the problem i found with group focuses is that they can’t be referenced to children groups/elements. I can only reference them to the parent groups which i use for structuring and that’s not helpful at all.
Either there should be a functionality for layering groups, or it should be possible to reference group focuses to any element on the page. Either of these would fix the issue.

Yes there is - instead of overlaying groups on top of each other, you have the top & bottom edges touching and collapse groups when hidden.

They definitely can be referenced to child groups or elements :slight_smile: I know there are some restrictions to what they can reference - but you can always put a text box, make it 1x1 px with no border and no content (so essentially invisible) and reference that. Or some other such element using the same concept. Plenty of ways to think outside the box to get your group focus where you want it :wink:

Group focuses are made specifically to be able to overlay, groups will ‘push’ other elements out of the way.

3 Likes

Its’s a hack but that approach doesn’t work on large one page apps on a editor level… Page becomes super tall and it’s a hassle to add new content and shift things around if your group height varies. Been there done that.

If group height is 800px x 30 it would be 24000px tall page :grinning:

When groups are stacked it’s easier to show/hide them like layers as @nico.dicagno was referring. It’s much more intuitive to use the editor that way.

1 Like

Maybe you should play around with “Align with parent” type of container.

Indeed. Different elements can be aligned to the same “nonant” and even have different “offsets” by setting the margin. It’s a super useful layout mode. :+1:

2 Likes

@sudsy is spot on with how to do this in the new responsive engine.

One thing the new responsive engine has taken away though is the rotation angle which was useful to help with the desired design in some instances.

@MarkusBoostedApp I believe it may be a ‘to each his own’ approach on that. I think the majority of uses would use the stack method @equibodyapp is referring to. Although the page height in the editor is tall, on the page itself it is only as tall as the single group being displayed at the moment when done correctly (requires the collapse height when hidden checkbox to be checked).

It could be a bit difficult to move things around, but for me personally performing the math necessary to move things easily by adjusting the Y values of the groups was not a problem. Luckily the new responsive engine makes it even quicker and easier with the ‘next/previous’ buttons. I’m sure when you use the new responsive engine you’ll start to use the approach of having the different groups be aligned bottom to top instead of ‘layering’ them.

For me personally the ‘layering’ approach is a nightmare to work with because you could never in the editor show all of the different groups at the same time, but when they are touching bottom to top you can and that makes it so much better to work with in the editor.

@doublejay that design is using a floating group that is set to float relative to bottom. In the new responsive engine when we get access through conditionals to adjust the height and all other layout properties it will make it super simple to create this as a ‘flyout’ where there could be a ‘shorter’ bottom float that when clicked will increase it’s height, kind of like a ‘drawer’.

One other thing that would be tremendous if the Bubble team added a feature, @nick.carroll, so that on a floating group we can conditionally set the z-index to be either ‘beneath the page or above the elements’ so that we can make much more use of floating groups to hide/show different ‘pages’ in a single page app with much smoother transitions and effects.

I’m excited for the finalized and polished version of the new responsive engine with full control of all properties in the conditionals. It will make designing great looking apps so much easier.

4 Likes

I’ve actually had a few situations where bubble restrictions made it necessary. Take the input field for example. If I want to start a workflow when the input field is “activated”, I can’t do that.

There’s a little trick, click on input in Design tab, add a condition “when input A is focused” (not this input term, really Input A (element name)) , copy that expression, go in WF tab, create a “do when a condition is true” with “every time” and paste expression in conditionnal.


image

tada!

Best practice for one page is actually make a large list and collapse, stacking has potential to cause issues.

Bubbles manual actually advises against placing excessive elements ontop of eachother when possible if I’m not mistaken. (I’ll look for the page)

If you need something stacked in new engine have you tried align to parent options?

1 Like

I would swear I had tried that :slight_smile: Thanks for the tip :metal:

This topic was automatically closed after 70 days. New replies are no longer allowed.