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?
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.
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.
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.
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.
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.