Fit Width to Content Row Containers

boston85719 · 2024-08-16T11:36:45.870Z

If you have a row container and set it to fit width to content and you put a text element inside of that row container and set the text element to fit width to content and then your page width decreases to the point that the text would need to break to a new line, Bubble does not break to a new line any longer and instead makes the group and text element go off screen.

This has not always been the case and I can not estimate when this Bug started to happen.

So, you can only use a column group set to fit width to content and put the text element into the column group and set text to fit width to content in order for the text to break to a new line and allow the group and text to decrease width to remain on screen.

This has not always been the case. In the past we could use fit width to content on rows and text within the row container and they would behave as expected.

Is anybody else experiencing this? Is this something that is expected with flexbox and I’m just a lunatic who makes up things as to how Bubble used to work properly or has it always been the case that Bubble didn’t allow a row container with fit width to content to decrease width as the page width decreased?

sudsy · 2024-08-16T18:17:11.256Z

boston85719:

Is anybody else experiencing this?

It works as expected for me (wraps at narrow widths). Off the top of my head, double check that…

there’s no Min width on the text element.
there’s no problematic custom CSS on the page.

Also, maybe preview in safe mode and/or create an isolated test case on a new page to help troubleshoot.

boston85719 · 2024-08-17T06:00:08.714Z

Thank you for confirming. I tested in another app and it works. Tested in the app where I saw the issue and it doesn’t work. Used safe mode to preview with no html or plugins and confirm there are no min widths on any element.

I’ve seen this in other apps as well and just never bothered to report or post about it and just changed the design a bit, but in this case the design can not be changed and I need the responsiveness settings to function properly.

I’ve now submitted a bug report about it.

ihsanzainal84 · 2024-08-17T08:43:27.958Z

Pretty sure that’s been the behavior for a long time.

boston85719 · 2024-08-17T10:51:51.668Z

It would have been a long time bug…testing in two apps, one works as expected, the other does not.

ihsanzainal84 · 2024-08-17T23:09:10.779Z

I remember being frustrated about this plenty of times in the past. Always assumed it’s just the nature of the beast.

sudsy · 2024-08-18T21:58:03.889Z

boston85719:

This has not always been the case.

ihsanzainal84:

Pretty sure that’s been the behavior for a long time.

So I took a closer look at this, and it seems the real answer is, “it depends”.

If the row container (the one containing the text elements) is itself inside a column container, then the text does not wrap regardless of the column container’s Fit width to content setting.

If the aim is to get the text elements to first “stack” and then “wrap”, I was able to achieve this by unchecking the Fit width to content setting for both the row container and its parent column container.

If the row’s parent has an ATP layout instead, then unchecking the Fit width to content setting for only the row does the trick (regardless of the Fit width to content setting of the parent ATP container).

Anyway, there might be other nuances depending on your element hierarchy, but maybe this helps. Seems like there should be a way to get your desired responsive behavior.

I don’t know that I’ve ever encountered this issue before, but it’s nice to have a better understanding of it.

boston85719 · 2024-08-19T05:51:37.107Z

I appreciate the insights. I did some testing to and see how nuanced it can be where we might need to alter so many other elements that shouldn’t need to be altered.

It is a shame that it is so nuanced as it really should not be. With such nuance, I’m unable to get the behavior, as the container group has an outline, so needs to be fit width to content, otherwise the outline stretches way beyond the length of text and looks terrible, as that has been the only way I’ve gotten it to make the text wrap.

Hopefully Bubble will fix it as it should be recognized as a bug and not ‘expected behavior’ since I’d imagine most any logical thinker would say the expected behavior is such that checking the box fit width to content will fit the width to the content, but, not essentially turn that element into a fixed width element and would actually allow the text to wrap.

Bugs like this cause the platform to be much less user friendly.

boston85719 · 2024-08-23T04:59:06.531Z

Here is response from Bubble support

When you have a row container with the “Fit width to content” setting enabled, and the text within that container also has this setting enabled, the text will not break into multiple lines as the screen width decreases. Instead, the container will stretch to fit the width of the content, which in this case is the single line of text.

To ensure that the text breaks lines appropriately, you’ll want to adjust the minimum width settings for the text element. Specifically, you can uncheck the “Fit width to content” setting for the text element, and then make sure the text element has appropriate min/max width settings to allow for responsive resizing as the screen width changes. For reference, here’s a screen recording of this being done in a similar setup.

I hope this helps! Please feel free to reach out if anything needs further clarification.

sudsy · 2024-08-23T07:15:06.244Z

boston85719:

Here is response from Bubble support

When you have a row container with the “Fit width to content” setting enabled, and the text within that container also has this setting enabled, the text will not break into multiple lines as the screen width decreases.

Interesting. While that’s certainly the behavior I would expect, it’s simply not consistently true. If, for example, that row container is inside another row container without “Fit width to content” enabled, then the text does in fact wrap.

The bottom line is that there are some edge cases (likely due to unanticipated CSS interactions and/or container nesting) which must be worked out on a case-by-case basis if/when they occur (which is not often in my experience).

My design approach/philosophy is that I always start with the desired layout and responsive behavior in mind and then implement it using as few elements as possible with the appropriate settings based on well understood behavior of the various containers and elements.

I rarely encounter unexpected behavior, which is why this case interested me.

system · 2024-08-30T11:36:59.118Z

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