New Responsive Engine [beta] is Live!

Good one! Maybe let us define layout profiles and select a default, like the Styles-functionality.

3 Likes

I agree with this one.

Also, I think it should be possible to “copy/paste layout properties”. Many many times I copy the properties across, especially while creating a table that has many columns.

1 Like

+1 - does anyone know how to center-align a floating group on the page?

@dschmidtfellner I build using 1280 width for all my pages. You should be able to adapt below for 960 etc:

  1. Add a new reusable element. Choose Floating as “type of element”.
    -Select Row as container layout
    -0 min width & 1280 max width
  2. drop in a regular Group.
    -Choose Row for layout
    -0 min width, 1280 max width (this group will have your buttons, logo etc)
  3. go back to Floating Group container & choose “center” for alignment

drop in the reusable on your pages. should be center aligned. Adjust padding/margins between page container & group as needed in reusable.

FYI this comes straight from Buildcamp; would recommend them to anyone. Lemme know if this works for you.

thanks! I will check that out. I guess you’re implying here that center-aligning floating groups without making them a reusable is impossible. Is that right?

Just double-checking - I can use this solution, but I’m trying to avoid reusables - I’ve found it difficult referring to custom states in them from the outside, or use workflows that involve their contents + things outside of them.

@dschmidtfellner

A simple way to get floating groups centred (or at least create the same outcome) is to make the actual floating group the full width of the page, set as a row container, and transparent (i.e. no background style)…

Then just add a group inside the floating group, centre aligned, to act as the visible element.

You’ll need to use some simple custom CSS to stop the transparent floating group from blocking clickable elements beneath it, and ensure clickable elements inside it remain clickable, but that’s simple enough to do.

2 Likes

Hi guys

I want the floating group to appear above the floating group.
If I select above elements, is it possible to adjust that zindex?
Also, I don’t want to use beneath the page because users operate on floating groups.
thank you.

Can you set ‘Collapse when hidden’ default to checked? 9 out of 10 times this is what I want.

2 Likes

What is the simple CSS

@chad5

What is the simple CSS

pointer-events:none will make the transparent floating group not react to pointer events (i.e. you’ll be able to click elements behind it). note: that will also make all elements inside the floating group unclickable.

So you’ll need to add pointer-events:auto to any elements inside the floating group that still need to be clickable.

Here’s some more info about the pointer-events CSS property if you need it
CSS pointer-events property (w3schools.com)

4 Likes

Tried to find that on the ideas board but having trouble with the search. Hopefully you included direction as well. I need it slower with a direction indicator - good suggestion

Rather 9.5 times out of 10

1 Like

Hey just wanted to say ive been using bubble for a couple months now and originally really found the responsive engine off putting. I thought it was too hard to use. Grr like let me just draw what I want where I want!

But recently the concepts clicked for me and I find that yes, it is getting faster and easier for me to layout my pages and think in terms of groups and layouts and margins. Also it’s great for re-ordering things in row and column layouts. I want the form before the table on the page? Parent group is a column layout and I just need to swap the two child groups. Nice. Kudos team.

3 Likes

This is great feedback, thank you for sharing. Do you remember what the aha moment was for you? Was it a certain piece of educational content, just time spent in the editor, something else?

3 Likes

Hey @nick.carroll! I held off on learning the new responsive engine because I felt very comfortable with the original engine.

I attempted to learn it a couple of times, but gave up pretty quickly.

About 6 weeks ago I gave it another shot one weekend. I watched this video by @lachlankirkwood1 and it was a my “aha” moment.

I can’t believe what it took previously. Loving the new engine. Huge shoutout to Lachlan. Put him on the payroll!

7 Likes

Hey @nick.carroll - far as I can see it’s not possible to dynamically change the min width of column setting for a RG via a conditional.

This would be useful for creating this kind of behaviour for RG cells, changing from, for example, 4 to 2 columns below a certain page width.

2022-04-09_16-42-48

Without this conditional the columns will always go 4 > 3 > 2 > 1
2022-04-09_16-46-06

Great work on the engine!

5 Likes

Same question here! GroupFocus “Fit width to content” seems like an obviously missing feature for responsive at this point – have you figured this out, or have @emmanuel and @josh implemented this?

1 Like

@nick.carroll
Great work on the new responsive engine!

I also want the width of column dynamically changing.
This responsive setting is very common. Is this in your plan ?

I agree it would be useful. Until Bubble provides a way, this how-to might be helpful.

1 Like

Just to say that despite frustrating issues, this new editor is the way to go, changes everything