Here's how to center a floating group (new responsive engine)

This topic has come up quite a few times since the new responsive engine was released, so until Bubble provides a way to do this, here are a couple approaches:

The second approach requires fewer elements and less CSS than the first approach and simply involves adding margin-left: auto; to the floating group’s style. The only real drawback is that it won’t appear centered in the editor.

Also, if the FG is set to horizontally align to the right in the Bubble editor (default is left), then the CSS would be margin-right: auto;. I suppose both could be added along with !important to cover all the bases, but I like to keep things simple. :slightly_smiling_face:

If anyone knows of any other techniques, please share.

13 Likes

Thank you for the tip!

Strangely enough, that even if @bubble pushed new responsive out of beta to live, there still wasn’t an option to center the floating alignment of the FG horizontally. With only Left and Right positions available.

Glad that there is workaround, but still hope that Bubble will enable this by default to choose from. :slight_smile:

1 Like

@psycholabdesign

Glad that there is workaround, but still hope that Bubble will enable this by default to choose from. :slight_smile:

I think the issue is not so much with Bubble, but due to the fact that (as far as I understand) CSS doesn’t have a ‘float centre’ property (only left or right) = hence the need to use one of the above ‘workarounds’…

Although I’m sure Bubble could, in theory, incorporate the the required CSS internally, and just give us an option to ‘centre’ it to make it easier for people who aren’t comfortable adding custom CSS…

1 Like

I see, thanks.

Though I’ve looked it up for CSS float property, I get that in the traditional styling there is no such thing as “float: center;”.
But also we’re talking Bubble here, and thus providing more options by overriding styles in order for ease of use - theoretically could be possible.

2 Likes

Hey there, thanks for flagging! I’ve gone ahead and submitted this as a feature request for our Product team’s evaluation. Feel free to reach out at support@bubble.io if you have any other questions/concerns/feedback/feature requests down the line! :slight_smile:

3 Likes

And how about this solution:
FG, make it Align to Parent, Max width - empty.
In the FG insert a Group with all the info/data you need, with Max width of 100%

3 Likes

@sudsy thanks for posting, very helpful! Silly question, but where does one make that CSS change (margin-left: auto) within the Bubble editor? Do you have to give the floating group an ID, and then target the ID thru an invisible HTML element on the page? Or is there an easier way? Thanks!

1 Like

I’m also wondering about this, haven’t been able to get it to work so far

So I’ve been able to get the CSS-styling to work. I did it by adding an HTML element to the page, and having it refer to the element I wanted to change (“floatinggroup”). However, I’m not able to get the margin-left: auto; command to work (I added an opacity command just to check if CSS was working at all, and it is). Does anybody know what I’m doing wrong here?


Bumping this - I am trying to get the second solution to work but I don’t know where to put the CSS or how to format it. I haven’t used CSS before.

EDIT: Never mind, placing a transparent group inside the FG then centering it works just as well.

I must be stupid, but where exactly does one add the margin-left: auto; to the floating group’s style?

Unless you want/need to be able to click on what’s behind the transparent group.

Any place you can include CSS in Bubble. Generally speaking, this can be at the app level, the page level, or within <style> tags inside a Bubble HTML element.

1 Like

This nailed it for me. Thank you :pray:

One of the most simple ways I aligned FG to Centre was adding Margins to floating group, in the editor it might seem off but when you will preview it, it would be at the Centre. Here are the screenshot

This is the editor page view

This is the FG margin setting

This is the result… FG at the Centre

But that, of course, will only work at 1 specific screen width (in other words, it’s not responsive).

Ooh, yeah that’s correct, but anyways it was a easy and fun :joy: workaround… Any suggestions to make it responsive @adamhholmes ?

1 Like

Either of the two methods discussed in this thread are the way to do it.

Personally, I just unchecked (make this element fixed-with) in Layout