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?
Not sure if the Bubble team has responded to the request yet or not. Maybe you could post over on the recently-started Responsive Engine Feature Request thread and mention @nick.carroll.
@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.)
I think there may be a bug in new engine, as I’m not able to achieve non-uniform cell widths… all cells in RG I’m working with overlap each other like their all fixed in a single position
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.
The working example now requires you to download a Chrome extension to see it.
The trick I found is to apply CSS properties ‘display: flex; flex-flow: wrap;’ to the repeating group. The Classify plugin should be able to do this. I think these are the steps:
install Classify plugin
enable ID attribute in your app settings if not already enabled
make the ID attribute for the RG something like {addClass: “flex-box-repeating-group”}
add an HTML element to your page, and put the following into it
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!
Nonetheless, I’ve just created an incredibly simple plugin specially for making any Repeating Group you choose flow from one row to the next, rather than being a fixed grid. It makes it simple to create chips/tags in pure Bubble, gives you complete design and interaction freedom, and doesn’t require any knowledge of HTML, JavaScript (for interactivity) or CSS.
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).
This is exactly what I was looking for