Unity UI Button - Click Area Messed Up

I'm getting this really really weird issue where some parts of the button work and other parts don't. This problem has been driving me nuts. Any help is greatly appreciated.

The Problem:

 

Interesting...have you tried restarting Unity?

 

I just noticed you had some UI stuff after your buttons, is there anything obscuring it?

 

This is full inspector image of the button that was partially blocked in the video but I don't think it was anything important. I also have restarted unity and that hasn't helped. Made a build and same issue.

EDIT: I also removed all the other buttons + text just to test the left most button. Going to bed but tomorrow I will make a new empty project to see if I get the issue there too.

 

I was able to fix this by deleting and making a brand new button. Still no idea what the root cause was. Copy / pasting the button duplicated the problem, FYI. And the moment I put the new button in the same hierarchy, that new button becomes broken forever (whether it gets removed from the hierarchy later or not). There seem to be some hierarchies that permanently corrupt a button's hit area, somehow...

 

I have the exact same problem.
Multiplied hundreds of time because I have a lot of buttons (mostly in world space)

This is even so weird I have a floating 3d panel with 3 buttons on top of each other, that are activated/desactivated so only one is active.
And only 1 of those buttons (which are all the same, I just copy/paste them) is bugged (I mean all 3 are, but only one is really broken at the point it's hard to even interact with it).
If I copy paste one of them during runtime, it bugs all the same...but not the original...
This is really a nasty bug, I wasted like 10 hours on it, nothing to do...

Please Unity Team, take a look at your UI system...

 

I have the same problem, can't find any fix

 

I ran into the same problem and the way I got it to work was move the button somewhere else in the canvas hierarchy. Hope this helps someone.

 

I had the same problem but in a UI situation. I had my buttons displayed in a Layout Group. I created a new Panel (and new Layout Group) and the problem went away.

 

In the industry we call this NFT(Not Fully Tested) or flying subscripts(crashes).
And do you want to know what causes this? The product creators. Thats right, Unity. Features beget features. Features is another way of using the F word. And where do we find these features? Deep, deep into the development process. For this reason and this reason alone I will never work for or under someone in Unity. These monsterous abominatoral mistakes are let out into the public so that the community can spruce up the product. Unity throws S*** over the wall and doesnt care. Those in the community who want to be famous will jump at the chance and rally to the call to aid the omnipotent god for rewards. And really sometimes it takes a little more documentation to enlighten devs to be able to avoid this. And how did I get here? I found the feature too!
Notice how I didnt use vial curses? Hehehehe. My dogs are cared S***less right now.

 

I didn't realize my post got revived so many times over the years. I don't remember how or if I ever fixed that bug, I mean it was 4 years ago. But what I can say is I've never run in to it again over the years. Now if you think you are having this issue, you might actually just have something blocking your button (not in my case but might be in yours).

The button itself needs an image component to define the clickable area so you shouldn't need to modify that. But for any UI element (like an image or text) that you want to make sure is not blocking your clicks, Add the "Canvas Group" component on it. There are two check boxes that you can set to false / uncheck. "Interactable" and "Blocks Raycasts". Then it shouldn't block your clicks to buttons.

Cheers and happy Deving

 

Having the same problem, I tried many things. The weird thing was that I have some 10 buttons in my main screen, and every one works fine. Adding a last button gave me nightmares! The "mistake" I had done was that the button was a child of a gameobject which had a scrollview as well. In the hierarchy the button was in the middle. When I moved the scrollview OVER the button (that is, the button now is the last child of the gameobject) it worked as expected! So I think you should check this first before trying to remake sprites, raw images or whatever...

 

Had a similar Problem. This was my Fix:
The Button had a TextMeshPro Child and the size of that child was way bigger than the button itself. Scaled them all down, which fixed the problem immediately.

 

Me too! We all ran into a similar problem here, but the way I fixed mine was by disabling Target Raycast field on the other UI elements that covers my button. You see, even though some of those UI element (texts, or panel) are invisible (alpha = 0), they still block the raycast, thus preventing the other UI element below them to be clicked.

 

I had this exact problem and it turned out to be exactly what LatchGameDev said. Just thought I would present it as a visual example for those who might have this problem in the future.



I could click all parts of this button except the top left of it. But it turned out that top left corner of the outer frame (the frame of the container, not the icon) was blocking that. The solution was simply to disable "Raycast Target", and more generally, to make a habit of only enabling that option for things you actually want the user to click.

 

I had the same issue. The problem was there was a TextMeshPro next to the button. TextMeshPro's size was just bigger than the actual text size so it was blocking a part of the button although there was not any parent-child relation. OP also has a text "UNIT" next to the button so that might be the issue.

Scaling the TextMeshPro or Disabling "Raycast Target" fixed it.

 

You always have to check the positioning of ALL elements when you use parent/child relationships. I ran into a similar issue, one button was clickable about 100 px off to the right of it...it came from setting one of the positions in the chain incorrectly. I have the feeling at least some of the issues on this thread have come from similar situations.

 

Genius.

So I had 3 objects; a Panel that I was using as a background, a child TextMeshPro button, and then the button had a TextMeshPro Text as child.

So my clickable area was basically a small part in the middle of my button - it did not span the width of either the Text, or the Button.

So I added an Image component to the button, the same size shape and colour as the panel I was using, and deleted the panel.

Now the button is perfect.

So thanks for that - thought I'd necro this post for the next poor sod who comes across this problem

 

So I have the same problem and the way I fix it is I have to check all the UI components include Text, TMPro,... to see all the objects area is overlap the UI that has a problem or not. If It has we must decrease the Object area that overlaps.

 

To add on to this, you can also move the UI elements around in the hierarchy. If a button is being blocked by another UI element, Moving that element to the top (just under Canvas) will put it behind the button, and should allow you to click it.

 

Cheers for this suggestion, that was my problem as well. Had me scratching my head and on hindsight it's very obvious (as these things always are). I used an overlay keyboard asset, but rescaled the keys to fit my needs. The Text child of the button was not scaled down with the button, so pressing a button sometimes triggered the adjacent one (since you would hit the overlapping Text component of it's neigbor.)

Thanks!

 

Half a day to figure out why one of my buttons had this issue.
The cause for me:
The parent "GameObject" of the canvas with the button was started as not active at launch and was activated later (when needed in the process).
The solution:
Starting with the gameobject active, deactivate it in a start function of a script and reactivate it later when needed.

 

For me it was the Rect area of a TM Pro text box that was overlaying my button.

 

Wow... Responding this question is like time travel! Most probably what's happening is you made a global change in some scene and this effected the "width and height" of an other object that you did not set it properly before. and high possibility it is a panel with no solid color it is now over your buttons. So go de-active everything but buttons. then active one by one and see which one is blocking your buttons.
cheers...

 

This guys got big brain solutions. Raycast target was on the text on the button...

 

Another stranger source of problems to look for when other solutions fail is raycast padding. Usually it's a great feature to be aware of, but if it's set wrong it could block raycasts too.

Spoiler

Padding allows you to expand/shrink the size of the clickable area. Negative padding increases the size of the button. Normally this is very useful.

Where it goes wrong... This item could have bad values, making it less clickable. Or another button might not look like it's blocking but it is due to the padding you added then something changed and now the padding is causing problems.