When you view the page the floating group is centered and all is good.
Now I cloned this element but unticked the “Fixed Width” checkbox and defined a minimum and maximum width, and again centered it horizontally on the page. This is floating group in RED
Just tinkering with your demo there, it looks like it works well when the screen width gets smaller, but not when it’s large. I don’t see the same type of controls available in the responsive editor as other elements, so maybe it’s just something that’s not supported. I’ve never seen anybody bring this challenge up before, it’d be neat to learn what’s going on!
As the screen width gets smaller and as one runs out of space (width), the element gets centered.
Another thing I just noticed - if I make the underlying page “floating_group.html” “fixed width”, the elements works as expected, i.e. they are both centered!
This is expected behavior. It’s how we use CSS in bubble.
Fixed width is going to position the element regardless of the user’s viewport.
I have a 4k resolution monitor. My viewport is at least a bajillion pixels wide. My bubble page is 960px wide, but it’s set to “custom”, not “fixed-width”.
If I use a fixed width floating group (the red one) it uses the size I made the bubble page to position the element in a fixed place relative to the canvas I specified, hence the center horizontally working as expected.
If I use maximum width floating group, bubble kicks in some different position rules and the group now floats relative to the users viewport.
To demonstrate what I mean, take note of whatever width the bubble page is set to (960px for example).
Go into your developer tools and set the viewport to 960px, as such:
I usually wrap my elements in the page, sans header, in a single column group as opposed to having all my groups and elements floating around willy nilly.
Other bubblers will put invisible groups on the edges of the page to force positions.
I think the problem is that in his example, the red group is not staying centered when the viewport gets wider. If I understand his question properly, the goal is for the floating group to be able to be responsive with its width but stay centered on the page, regardless of viewport width.
So on his app, the Red floating group is not fixed width. When the viewport is less than 960, the Red floating group stays centered and squishes appropriately. When the viewport gets bigger, the Red floating group does not stay centered on the page, but it should. I think?
Notice it’s centered according to the width of my display. The size ratio specified in the editor is the same.
By making the group fixed width, you are essentially telling the viewport to ignore all ratios.
By setting a maximum-width, you are telling the viewport to ignore ratios over a certain width for this single group.
Because it’s for the single group, it will ignore sizing ratio on the group, hence the pixel width “is expected” (that’s what the max-width does), but, and here’s where the problem lay, it will not ignore the rest of the page’s ratio, as defined on the page context editor.
It’s counter-intuitive because within the editor we mostly use pixels to size our elements, but responsive web design prefers percentages.
The only time we see percentages in the editor is while setting minimum width, but in truth it’s used all over and bubble just does most of the conversions for us.
It’s a kind of handicap to use pixels. Because pixels seem so intuitive but in reality designing with absolute sizes is always going to lead to broken behavior somewhere, be it on a mobile display or a 8k movie projector.
edit: there’s other places within the editor we see percentages not pixels, but the minimum-width is the most prominent.
I’m not sure if what I’m saying is different than what you’re saying, so I’ll take another approach. With regular groups, in the responsive view, you can tell it to align left, center, or right. With floating groups, you cannot. In my mind, that’s what the problem is. Regardless of whether or not the floating group has a max width, I want it to always be centered in the page.
The floatiness is working correctly, but the darn thing isn’t staying in the center of the page.
Because floating groups are positioned relative to something, either the document or it’s nearest relative.
Groups are static unless affected by other groups or elements.
It is staying centered, unless I tell it not to by adding a maximum width, at which point because it’s a floating group it’s going to ignore the documents positioning and follow the rule I set to float.
This is why that is a useful feature. I can drop something like this in without affecting the positioning of my normal groups. Hidden drop down menus are a good example of when to use this - they can affect my group positioning, unless of course I use a floating group to ignore and be ignored by the positioning of other groups.