Shadow Bug with Group Focus

I believe this is a bug, unless there is a workaround I am unfamiliar with.
I need a shadow around my Group-Focus Dropdown, as shown in the second image. There are two ways to do this in Bubble, which both produce undesirable results.

  1. Put the shadow on the Focus element: this puts the shadow on a rectangular group, which creates the effect in image 1.
  2. Put the shadow on the elements within the Focus element: this restricts the shadow to within the focus group, clipping it outside of the element.

BUBBLE SHADOW
2E2DC385-95DA-4055-BF58-39150B4AECA0_4_5005_c

DESIRED SHADOW
A0C2BD33-D43C-4068-AC19-4EF64F56250B_4_5005_c

I’m not sure I understand the question… (I can’t see any difference between the shadows in the 2 images)…

What am I looking at?… what are you trying to achieve that’s different from what you’re getting?

Maybe some clearer screenshots or more detailed explanation might help…

2 Likes

I’ve outlined where the dropdown actually exists in image 1; it can’t be seen because the shadow on the Group Focus is creating a weird effect. Image two (original post) shows what Image 1 should look like.
Image 10-30-22 at 11.04 AM

The focus is styled as so:

This is not a bug. The group focus by default does not allow CSS overflow. It’s hidden. Add CSS to the focus group to allow overflow

1 Like

Thanks Ali. Such as:
.shadow-focus { overflow: visible; }?
I added a custom CSS class to the page on load and assigned it to the group focus via the ID. However, this did not keep the shadow from clipping (I applied it to the element within the Group Focus)


This topic was automatically closed after 14 days. New replies are no longer allowed.