As we continue to navigate and play around with the incredible new responsive engine just released, we’re becoming more and more excited about the design options/layouts now possible… Internally at Restack, we like to say Bubble “ate” Webflow
Quick question for everyone around designing with Repeating Groups… We’re trying to understand best practices around building sets of things (options, data or even just text) that mimic a “multi-select” as shown here:
Before, our primary hack for handling view only “multi-select” was to use Bubble’s native multi-select element, and disable the input…
With the new responsive engine, in theory this should now be possible to have a repeating group of texts with the width set to length of the content… The issue we keep running into is not being able to have variable widths of each cell in a repeating group…
Anyone have any success creating the above with a repeating group, or any other thoughts here?
@matt15, I don’t think it’s possible out of the box yet, since repeating groups use CSS grid and not CSS flex. (Non-uniform cell widths are possible - wrapping is not.) With a trivial CSS tweak, though, wrapping can be accomplished. Here’s a working example with the relevant CSS and access to edit mode. It’s literally changing the value of one existing property and then adding a wrap property.
Nick (from Bubble) did respond and said it was a reasonable request that he’d be passing it along to the engineering team, so perhaps we’ll see it down the road at some point. (Thanks for the mention, @eLPDev.)
not sure if I have a similiar request:
I would like to have a RG which is 100% width where the amount of columns drives the width of each column. E.g. 3 columns = 33% per column. 5 columns = 20% per column.
The number of columns will be dictated by the data source and a state.
So far, I can only either say (“hard coded” in bubble) how many columns I want to have (not dynamic) or I can set the % width of column. However, when I set it to e.g. 33% and I only show 2 columns the two displayed columns in the RG take only 66%
AFAIK, the number of columns can’t be set in that way. It’s either fixed at design time, or it’s determined by the minimum column width. That is, cells wrap once they hit their minimum width. If anyone knows different, would love to hear.
This issue comes up quite often and is explained in a number of places on the forum. This thread has a good rundown of different approaches. As also pointed out in that thread, if you don’t need interactivity, then a repeating group might not even be necessary. There should be no need for a plug-in though.
Of course, anything you can do with a plugin, you can do without a plugin!
If people still prefer to use HTML elements with CSS styles, add ID attributes etc., then all power to them. But I think many users will find this plugin is the cleanest, most Bubblish way of achieving this very common use case - that is, until Bubble adds the functionality directly into Repeating Groups (something I would have thought would be incredibly trivial, given the plugin I made to achieve it is <100 characters).