How to use 2 overlapping buttons

Hi,
I have a button for the whole grey part that when on hovered the arrows on the right side appear, and I have a button for the arrows to increase/decrease the stat on clicked. But they dont work at the same time, they block each other, how can I make this work? Or is there a way to do something similar to on hovered that dont require a button?

Thanks help is much appreciated :slight_smile:

I’ve done similar to this and I didn’t remember any issue. I think order in the hierarchy might might? Lower down hierarchy has higher z-order.

If you use the widget reflector to show which widget is being hovered, what does it tell you?

I tried to do that, but then only the one with the highest z- order works, so when I do the grey button, the arrow buttons dont work and the other way around, and sorry not familiar with the widget reflector but I used print strings and It returned the one with the highest z-order

The same result in the widget reflector.

Am I doing UI the wrong way? I use borders and vertical/horizontal boxes a lot, is that what could cause this?

I think I found the issue, the other text you see in the image was in the same border as the arrow buttons, I think that those text blocks blocked the grey button, now I did the arrow buttons in a separate border and put them highest in z-order and everything seems to work.
Thanks for your time :slight_smile:

1 Like

ah yeah that’s one of those sneaky little caveats.

it seems that any children to a button will also capture it’s on hovered, so usually I set them to not hit testable. Glad it’s working.
widget reflector is really handy, before i learned to use it, debugging UI was a nightmare. Now it’s usually not a big deal.

Yeah good to know, thanks!