This is somewhat strange, and I never noticed this before.
I am trying to use an icon to toggle visibility of a group. Depending on where I place the icon (I’ve tried a button as well), the hand cursor either becomes visible or not. Essentially if I place the icon at the bottom of the page it works. As I move it towards the top, at some point the hand cursor stops showing up. I have tried standard icons, the material icons, as well as the Ionic icons. Same behavior with all of them.
When ‘hand cursor’ disappear it’s because something is in front.
Can you replicate the problem in a simple app and share, or send a bug report?
Thanks John. Tracked this down. It turned out that a reusable element header I had in the page had popup triggered from an icon in the header group. Any icon placed on the page over the invisible popup became unclickable.
@JohnMark is correct. There’s no weird behavior in general with icons. What is happening in your case (most likely) is that (1) the icon you’re moving around is perhaps at the bottom of the layer order and there’s some element you’ve forgotten about that is in front of it or (2) there is some element at the top of your page (a header perhaps?) that is resizing and extending down further than you think.
In either case that thing in front is “eating” the hover and click states.
To find the offending element, use the Inspector in debug mode. That’s this button on the right:
When that mode is active, as you mouse over elements, they will highlight in red like this and you can quickly find the mystery object eating your clicks:
Alternatively, in the editor view, right click your icon and “bring to front”.
Keith,
Thanks for this. I will use it in the future. I did bring to icon to the front (several times in fact). There seems to be something about being in front of an invisible popup. Maybe something about the popup being modal.
This topic was automatically closed after 70 days. New replies are no longer allowed.
