Custom Dropdown Sorting Order problem

I’ve created a custom dropdown box in the UI system. I have a problem that when the dropdown list appears, it is sorted behind other elements in the Canvas due to it’s position in the hierarchy…


You can see the ‘Patient Details Panel’ is layered on top of the ‘Vision Test’ dropdown…


I always want the dropdown to appear on top of other elements so I tried adding a canvas component to the dropdown and clicking ‘override sorting layer’ to position it on top. Now, although the dropdown appears on top, I can’t interact with it. I tried adding an Event System to the dropdown component too but then I can’t even activate the dropdown.

Has anyone encountered the same problem or can suggest a solution? I can’t use a newer version of Unity and I’ve already tried using a 3rd party dropdown but it’s causing Unity to crash. I’m stuck with writing my own like this.

The draw order of UI elements is the same order they appear in the hierarchy. If you want something to be on top of all other elements, you have to make it the last element at the bottom of the list of the canvas’ children.

I found a fix. I had a look at the components that are added to the root canvas whenever you create a UI element. It seems a ‘graphics raycaster’ is required to make the canvas interactable. When I add both a canvas and a graphics raycaster to my dropdown component it works as expected. You just need to click override sorting on the canvas component.