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.
- Put the shadow on the Focus element: this puts the shadow on a rectangular group, which creates the effect in image 1.
- 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
DESIRED SHADOW
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…
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.
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
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)
