UI Button is unclickable based on position in Hierarchy

Im experiencing an issue which seems very strange to me although there could possibly be a very logical reasoning behind it. I havent developed in any of the recent Unitys with my last being either 4.5 or somewhere before that when they didnt have the new UI component (Not that I remember).

Anyways, my issue lies in having a UI element with a button script on it. To put it simply, as you can see in the image, having my BookPower(1) located above the disabled BookPageFood causes the button to be unclickable in the game view, whereas putting it directly below the BookPageFood allows the button to be clickable.

There doesn’t appear to be anything blocking the way, and whats more peculiar is that if I were to place BookPower(1) under BookPageFood (Making it clickable), and I deleted BookPageFood, the button once again becomes unclickable.

Hopefully that didnt come out too confusing.

Is there something Im not understanding about the new UI system that should be blatantly obvious to me?

Put a CanvasGroup on your UI elements and uncheck the BlocksRaycast on any element that isn’t supposed to be at the top.

And there’s irony there as well because for the new(ish) UI top means bottom. In that image the BookPageFood panel has moved below the button you want to click, this means it’s on top of the button on your screen.

Now you can disable clicks being blocked with a canvas group but I’m also thinking your layout might be the issue. Should those buttons be at the top of the page and not blocked at all?

The UI is mighty powerful and a vast improvement but it does take some getting used to, the best advice is to put the Anchors to the corner of each element. This locks the scale of that item so it scales for different resolutions/ aspect ratios.

Like this:
71142-anchorsspng.png

If the Anchors of the BookPageFood panel are at the corners then it shouldn’t expand out over the buttons but it really depends on your layout.