Floating Group Bug?

I’m not sure if this a bug or not.

I’m wondering if anyone else facing a similar issue?

The example is available in the forum app:

Editor

web page

I define a floating group in GREEN and made it “Fixed Width”, and centered it horizontally on the page.

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

You can see that is it not centered, though all the properties are the same except that it is not fixed width.

Is this a bug or am I not understanding something correctly?

Any help would be much appreciated !

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!

Exactly.

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!

@emmanuel - any idea what is going on here? Is this a bug or the expected behaviour?

I think I’d go ahead and file a bug report on this one.

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:

The floating group is where it should be, centered.

Now, set the page width to another size, say 1400px

Again, as expected.

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?

Right…but the floating group is working as expected, it’s the layout that’s causing issues.

Here is a screenshot of what the element looks like with no max width on my desktop.

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.

Ah, I thought floating groups only anchored to top or bottom, I didn’t realize they would have fixed anchor points horizontally. That’s handy to know.

J&E added to ability to float them relative to nothing or both top and bottom a few months back. Super useful but definitely confusing.

But yea, to me floating implies the ability to “ignore” positioning rules my “anchored” elements create. It can “float” around the document.

I still break my layout all the time, but they help me break it less all the time.

@skylershelton thank you for the thorough reply. @potentialthings thank you for pushing this thread forward

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