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 )
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.
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!
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)
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.
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.
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.
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:
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?
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.
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.
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)
@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.
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!
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.
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.
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…
)
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.