Element collision bug

Hello,

I am using a header that is a reusable element on my page. It has a material icon from google on it.

I suspect i am having a mouse collision bug:

Screenshot_2

Screenshot_3

Screenshot_4

Is there a way to avoid this, or is this a bubble is bug?
thanks

The element itself is a square, so your mouse can activate it anywhere within the bounds of the element.

but… look at the first picture, it’s not able to click within the element itself

image

it goes beyond the lower and right boundaries

Oh I see. That’s weird. Just to clarify, does that mean that clicking it doesn’t do anything? I find that many times, the element is still clickable, even if the pointer is not in hand mode.

no, it’s not clickable

The best thing would be to share a link to your editor, set to Anyone can View. If you’re not comfortable doing that, you can create a new public app (or use the Bubble Forum app) to clone your setup, then share the link so the community can see what’s going on.

1 Like

On Windows/Chrome, I see an arrow pointer all over the screen and a pointer hand when it’s clickable. So, if the icon doesn’t link to anything an arrow pointer seems right. Any chance your header links to something, has a workflow, or a conditional state that changes on hover? …that would explain why it’s a hand on the header and not the icon.

1 Like

no, the header itself doesn’t have a workflow. only the button itself opens up a “focus group” below

image

i tried to replicate this, but it didn’t work.
I realized that i have two javascript to bubble elements near the icon and tried to move them away, and now it’s working as it should be.

i thought they wouldn’t interfere since they are invisible…

1 Like

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