Feature request: Variable heights/width for Repeating Group items (and other elements?)

robbertmastebroek · January 6, 2018, 3:06pm

Hi guys!

As some of you here might already know I’m a designer (like lots of people here!) and last year I’ve built QritiQ using 100% Bubble. Bubble is fantastic – but there’s one ‘issue’ that keeps coming back when I’m designing apps with Bubble: Repeating group items must all have the same size.

I think it would be really great if (repeating group) items could adapt it’s size to the content in it.

This way, we can create more visually interesting layouts like Masonry’s (Pinterest style!), Tag Clouds, Breadcrumbs, etc. – but maybe also have buttons that change size based on it’s content.

I can’t be the only one here that would be interested in native Bubble support for this. If you are – I’d say leave a message right here! Maybe the Bubble team can also jump in the conversation then.

Thanks!

(Here are some layout examples if you have no idea what I’m talking about )

shirtshackservices · January 6, 2018, 3:09pm

I’ve wanted this ever since I started using bubble. This would make every design where the user gets to input something better. I have the same problem, if a user uploads a landscape image, there is so much blank space.

robbertmastebroek · January 6, 2018, 3:14pm

Cool – so I’m not the only one, haha!

Yeah, there are many many use cases for this, especially with ‘user generated content’ like you’re mentioning.

shirtshackservices · January 6, 2018, 3:25pm

If you look at the previous ideas it gets mentioned a lot. I feel like the demand is not what is holding it back from being implemented.

romanmg · January 6, 2018, 3:45pm

Definitely a desired feature. It has come up quite a bit, but last I saw from Bubble was that changing things would be tricky for the responsive engine:

Hopefully these kinds of dynamic dimensions get implemented in the near future!

jules.marcilhacy · February 7, 2018, 11:21pm

I am also giving my vote to that one

jrowley343 · February 23, 2018, 10:21pm

Dynamic Masonry Pinterest Style Cascading Grid

I don’t know if they are going to come up with a solution for this anytime soon. But for now, here is a workaround so that you can at least achieve the Masonry/Pinterest type grid you’re looking for. Hopefully this helps!

This allows you to have a feed that updates dynamically as you or others add to the content.
The order of the photos will be
1 2 3 4
5 6 7 8
etc.

Note: I’ve placed borders around all the groups I will be dealing with to make it easier to see and work with. You will probably want it to look cleaner from the start.

Start by placing a repeating group somewhere on the page. Put it anywhere on the page and you can make it very small— it will be hidden so it doesn’t matter. This will do the search for the content you want to fill your grid. This makes it so that the search is only performed once, not a separate time for each column. Program it like this:

Next, place a repeating group on the page. This will be the first column of your content. Program it as follows:
(note: my layout style for the repeating group is Ext. vertical scrolling)

Then make a group inside that same repeating group. *Important: check the box to collapse the group when hidden. Program it like this:

You’ll then add a condition to make the column show the photos you want in the right order and not duplicate photos.
Program it like this: Current cell’s index - 1 < modulo > 4 is not 0
Choose “This element is visible” from the menu Select a property to change when true. Make sure to uncheck the box.

Insert your content into the cell. Make sure the image is programmed like this and that the image is set to Adjust the element height.

Copy and paste the repeating group to build the rest of your columns.

Change the programming in each subsequent repeating group. Column one should start with items from #1. Column two should start with items from #2, and so forth.

Here’s the finished product:

And then without all the extra fluff:

Hope this helped someone out there! Let me know if I missed anything in the tutorial.

robbertmastebroek · February 27, 2018, 10:29pm

Amazing tutorial, thanks man!

I gave it a try and it works really well – and it’s really easy to set up. The repeating group somehow still ‘shows’ the empty list items – which is a bit annoying because it causes lots of whitespace at the bottom – but other than that this is a pretty good solution for the time being.

Cheers!

jrowley343 · February 28, 2018, 8:48pm

You should be able to eliminate any whitespace between photos. What you’re telling it to do is only to show every fourth item in the list, starting on whichever column you’re on. So there shouldn’t be any empty list items as far as I know. Getting rid of whitespace should be a simple matter of shrinking down the repeating group and the group inside it down to the photo size like this:

And you should come up with something like this:

But if you’re talking about this whitespace that would come up at the end of the list:

I don’t think my solution could fix that problem unfortunately.

Let me know if you can make it work for you. I have been thinking about posting this as a showcase on the forum, do you feel that would be helpful to people?

robbertmastebroek · March 3, 2018, 11:00am

Ah yeah, whoops, shrinking the image group fixes it.

Sure, I think it would be good to create a separate showcase item for this. I think having a ‘Pinterest style grid’ was asked here before and this seems like a great solution.

gregjohnkeegan · May 1, 2018, 8:06pm

I grappled with this issue for a long time. Glad to see you found a solution @jrowley343 Great effort.

dbar345 · September 9, 2018, 5:48pm

Thanks for posting this. This is a frequent problem for me too, and I will likely move my project off Bubble due to the limitation. Dynamic tag clusters, link groups, and button groups are my biggest pain points—not so much the masonry grids. That said, I’m really impressed with how far I got using only visual programming so kudos to the Bubble team.

zelus_pudding · November 7, 2018, 5:38pm

This is strange… I have variable height repeating groups in my app. I’ve pre placed all the text content I could possibly want to see in a cell (it’s important that it doesn’t overlap) and am hiding any of the content that shouldn’t appear in a particular cell - setting the element’s height to collapse when hidden. That automatically changes the height of a cell in my app… Now I just wish I could make the cell clickable without having to put an invisible button over the whole cell (which sadly doesn’t resize with the cell height)

fayewatson · November 7, 2018, 6:36pm

@zelus_pudding an alternative to using a transparent button is to place all of the cell contents in a group, and then make that group clickable. That way everything should resize since no elements are overlapping.

ryan8 · November 7, 2018, 6:43pm

I have asked about this before… and about centering RGs. Bubble has said they would put this on their horizon but i dunno how long till it gets resolved. It is a huge hole in bubbles excellent platform!

ryan8 · November 7, 2018, 6:45pm

I recently figured out how to change the width of the RG

zelus_pudding · November 7, 2018, 7:44pm

That’s exactly what I thought @fayewatson!.. but those groups didn’t resize for some reason I also tried with shapes to no avail. In the end I’m just making the text content clickable and changing it’s background. Doesn’t look as good as what I originally wanted but it’ll work for now.

fayewatson · November 7, 2018, 7:59pm

Ohh! That’s odd it’s not resizing! If you’d like to PM me a link to your app editor, I’d be happy to take a look!

ion.petrea · December 20, 2018, 5:39pm

Hey. How can I achieve the same thing but instead of images I want to do it with text? Will it work if using the same steps?(I guess I will give it a try). I have columns of text of random size and bubble aligns them all leaving the shorter ones with a lot of free space. And some of my columns are super tall while others can be super short and this leaves even more space than shown in the picture.

[Album] Imgur

UPDATE: It actually works. Tho the last columns still have some space but it works

FJP · January 21, 2019, 9:31pm

Interesting topic, can some please explain how the formula above works? I know it used to get item 1,5,etc in first column and 2,6 in the second column but how…