Hi,
I’m trying to create a layout that has items which butt up to one another horizontally, where each item has content that may vary in width (e.g. text breadcrumbs that also include non-text image elements).
I’m coming up short on how to create this in Bubble. Is something like this currently possible?
Thanks!
I think if you put them all in a group, and make sure the text elements are set to shrink if text is shorter, that might do it. I know it’s possible, but am not in a place to go fiddle with it at the moment.
Thanks for the help and tip Andrew.
It looks like there is an option to shrink height. When I activate this and play with different lengths of text (just static text for now) the text does wrap but won’t expand the width of the container (or collapse the width if the container is set with extra wide in the design).
From looking at earlier examples it feels like this should be possible. Devil = details, as usual 
what if you have all the elements lined up directly with each other, to where their borders are touching. You can increase the padding on the text elements to provide spacing. Does that work?
Interesting idea. I pushed all of the elements directly up to one another (both text and images) - both within a group and in another version directly on the page.
On these I also toggled varying combinations of the ‘shrink height’ option and the Responsive settings (such as ‘make element fixed-width’).
Unfortunately, in all cases, the text container (or its parent group) doesn’t change its width per the width of the text content.
It seems like this collapsing width behavior would also be a big win for creating tabs, where the label may vary in length.
I put a pause on trying to solve this for breadcrumbs, only to find I need to same ‘collapsing text container width’ behavior for a number of other places 
Here’s another example of where this behavior would be a big help. Here I have a Repeating Group with rows that will ultimately contain children items.
Each row’s heading varies in length and has a horizontal line that should butt up to the heading’s margin. Since I don’t think the line’s width can be changed per row I have a background color on the heading area that covers the line. If the heading area can collapse to the text’s width, the effect should work.
@emmanuel is the effect of collapsing a text container’s width to its content possible in any way currently?
Thanks
No it’s not.
Thanks for the quick reply Emmanuel.
Although by no means elegant, I was able to hammer this effect in by making the containers wider than the widest possible value and manually removing the width on these text containers via JavaScript (at least until the ability to collapse container widths is added in Bubble directly).
The code below loads and uses jQuery, and was placed in the “Settings > SEO & Metatags > Advanced Settings > Scripts / meta tags in the header” input. If anyone copy-pastes note it’s very global at the moment and targets all text elements within all Repeating Groups on every page.
It looks like there is a hook to scope this effect to a specific page (using the page class on the outer most div) but no hooks to target specific groups or elements.
Does anyone know if there is a way to pass a unique ID (class, etc.) to elements for these kind of temporary workarounds?
I’d guess not, since the aim is to be no-code after all - which will be fantastic 
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($) {
var headings = setInterval(function() {
if ($('.bubble-element.RepeatingGroup .rows .bubble-element.Text').length) {
$('.bubble-element.RepeatingGroup .rows .bubble-element.Text').css('width','auto');
clearInterval(headings);
}
}, 100); // check every 100ms
});
</script>@Emmanuel, is this ability – containers adjusting width per their content and affect positioning of neighboring elements– something that would be feasible to add to Bubble in the future (ideally near future ;))?
I keep running into the need for this when trying to create dynamic content versions of a range of components (e.g. the breadcrumbs, tabs, and headers noted above). Here’s another, having slats/cards with multiple, dynamic data points that should sit next to one another –
Thanks!
An additional thought on this – I realize much of Bubble’s layout is done via absolute positioning, making accounting for varying elements widths and their neighbor’s position probably exponentially more complicated.
Some other tools have a concept of a stack box for this - a type of group that stacks its immediate children either vertically or horizontally. A child’s individual height or width determine how it takes up the space within the group.
Perhaps the behavior described in the posts above could be accomplished by grouping items within this type of ‘stack group’ element which uses some equivalent of flexbox internally and absolute positioning on the parent stack group item?
Maybe you can test out a “stacking” group now that Bubble has opened up the ability to create UI elements from scratch.
Thanks for the heads up. I wasn’t aware custom elements had been opened up yet - that’s fantastic news.
Did you solve this issue ? THis is something I have run accross multiple times too…
Hey Clayton,
If you’re in the know about about code, I strongly encourage you to jump into the element builder arena and have a go! Lots of people would love to see this variable width feature come to fruition.
Have a good weekend Clayton!
This is still a need - would love to have an easy way to do this
There are grossly gnargly bandways to get around this… alas, no elegant solution to date… My kingdom for HTML tags!!!
Drop me a line if you figure this out in an easy way.
I’ve had to resort to moving boxes based on calculations of text widths. It’s gruesome and embarrassing, but if you need to get it done, simply measure the width of your text, move separate boxes into place (ie, measure the width of 100 capital A’s of a specified size and font, divide by 100, concatenate your findings based on a tabled lookup of your desired spaced text, move some boxes, and Bob’s yer uncle) It’s gross but it works.
Alternatively, you can simply stack differing texts all in one text box. They’ll have the same formatting, but it gets around Bubble’s abhorrent lack of horizontal spacing prowess.
Happy Bubblin!
Ashley
+1 common requirement for social apps with a status line that concatenates various data fields of varying length.
Eg:
malcolmlewis . Jun 12, 2020 . 1,234 comments
vs.
mdl3 . 1:08pm . 3 comments
Current system tabs them out
