How to stop shadows from clipping within a repeating group

Quick Tip for Working with Repeating Groups and Shadows

Here's a quick tip for working with repeating groups and shadows in your Bubble app. 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.

Fixing the Gap Between Elements

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 have 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.

Fixing the Shadow Clipping Effect

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 get... until you refresh the page.

Changing the Overflow Property

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 how do I... if I refresh the page... yeah the change isn't saved because all I'm doing is changing the data my browser is using to render the page.

Applying CSS in Bubble

So 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 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.

Adding Custom CSS

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 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.

Final Adjustments and Testing

No show shadows I was just checking it was show shadow 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 months ago in the video that is how to get your shadows looking really good in a repeating group.