Here's a quick tip for working with repeating groups and shadows in your Bubble app.

Shadow clipping

I've made it red so that it stands out because what I'm trying to illustrate here is that the shadow doesn't look that great. There's a couple of things I'm going to fix in this video.

First of all, the gap between each element. So one reason that that is slightly out is that I've got a min height on these two elements here. I'm then going to remove the min height on the row.

And lastly, and this is a little bit of a trick, you could add margin below an element, below this group, below this cell, but then that's going to add it to the very last cell on the repeating group. So to get a nice gap between them, I am actually going to use the separator. I'm going to say, let's go for 16. And then all I do is make it completely transparent.

Okay, that's looking much more uniformed, but I'm still getting this clipping effect around my shadow. So how can I fix that? Well, I need to write a little bit of custom CSS, and I'm going to show you how.

So I go into... I right click, I'm in Chrome, I right click and I choose inspect, and then I find my repeating group. And I'm going to write... I'm doing it in the browser inspector. This is just temporary. This isn't actually changing the code on your website. It's just changing the code your browser uses to generate your website until you refresh the page.

What I need to change here is the overflow. And so I need to say, instead of overflow auto, I need to say overflow visible. And then I get the true nice effect with my shadow. Now, if I refresh the page, the change isn't saved because all I'm doing is changing the data my browser is using to render the page.

How to add custom CSS to Bubble

I need to apply that CSS in Bubble. And to do that, I need to enable a feature to write in a custom ID for an element such as this repeating group. And the way I do that is by going into settings and general and then looking for the option, expose the option to add an ID attribute to HTML elements. And then I'm going to say show shadows.

And that allows me to repeat, put show shadows in any other repeating group that I want to be able to combat this issue with. And to add the CSS to the page, I can either do it to the individual page in the page header here. But to apply this across all of my app, I'm going to go into settings, SEO and Meta tags, and then add some custom CSS in here.

So I'm targeting an ID, and so that means it starts with a hash. And I've already forgotten what I used. Show shadows. And then the attribute I change is overflow, and I make that visible. Let's test that. Okay, it's still not worked. So what do we try? Well, it's basically because we're having to brute force against the Bubble's default style scheme. And the way we can brute force it is to add exclamation mark important to the end. Also, I might have made a spelling mistake there. No, it's show shadows. I was just checking it was show shadows, not show shadows, not show shadow. Let's refresh it. That should work now.

Okay, there we have it. So with a bit of custom CSS, literally three lines of code, which you can see from just a few moments ago in the video, that is how to get your shadows looking really good in a repeating group.