(4.6) UI objects draw ordering

Hello.
I have a UI that lists other UI objects at runtime and they can be added/removed dynamically.
These objects have a 'drop down menu' as a child made from buttons and a panel using the layout elements/group components and as such cant be moved around in the hierarchy because of the layout components.

My issue is that if object 1's drop-down menu is opened, it drops down behind the 'newer' object below it making the buttons hidden and unclickable.

I know of the sibling index variable but this (after experimentation) doesn't fix it.

I vaguely remember in the beta (a few iterations ago) that we could straight up set the render order of individual elements, has this been utterly removed because I cant find that option anywhere.

 

As relatively simple solution should be to add a canvas to the drop-down and in there enable "override sorting" and make sure you have an appropriate value there.

 

Played around with a canvas at various points in the dropdown object and with varying sorting values including -999, -10, -1, 0, 1, 10, 999 but it will not alter the priority at all (inface it makes everything as a child of the canvas disappear).

 

Could you share a screenshot? Seeing the hierarchy might also help.
It sounds as if you might have more than one UI, maybe even an overlay and another one.

 

Everything highlighted in the hierarchy is the drop down menu containing possible items (the ButtonPrefab(Clone)'s).
.As you can see on the far right, when opened, the drop down menu falls behind the other pnlOBJECT.

 

Which canvas settings are you using for the drop down? And to which canvas does this "None" button belong?

 

The 'DropDownMenu_ItemType' object is a panel and is the start of the dropdown menu structure, it only has a script to populate the list.
'btnDropDownButton' Just has an onclick to open the menu.
'itemTypeDropDown' is a panel and has a 'vertical layout group' and 'content size fitter' to control the child buttons (menu selection) layout, and its anchor is set to the bottom of the parent button to ensure that it opens from the correct position.
'ButtonPrefab(Clone)' has a 'Layout element' so it adherers to its parents vertical layou group component.

 

It seems I didn't make it clear enough. The essential part is the Canvas settings, so those are the important ones. What did you specify there?

 

Ahh, apologies.
Here are the settings for the parent canvas:


As for the extra canvas you suggested to inset into the dropdown, I tried every variation in every part of the dropdown object as I could (adding and altering element components, changing sibling values, etc).

 

Did you try to make a small reproduction to understand what is going on and why it is not working?

 

Yeh iv tried from scratch a couple of times.
From my understanding its the overall position in the canvas that's causing it (referencing the draw order).
Also, sibling index will not work due to its sibling 'scope' is still too far down the tree.
One thing that comes to mind is to jump it out of its current hierarchy and place make it a child of the outermost canvas, ensuring it is drawn last.
This will need some tinkering with the layout elements to make sure it doesn't jump around the canvas like it does currently if its moved to somewhere else with a specific layout component.
I was just hoping for some 'out-of-the-box' change this value and it works as expected.

 

If you create a canvas for the drop down, it will be taken out of the draw order of any parent canvas and uses instead the given values. I assume that there is an issue in your setup. Maybe there is another canvas which is drawn even after the the drop down.

 

The canvas named 'Canvas' is the only canvas in the scene.
As I say, I have tried adding a new canvas to 'pnlOBJECT1' object and making the dropdown a child of that new canvas.
The objects of the new child canvas still appear behind everything else and setting the 'override sorting' value to true caused the canvas and its contents to disappear from the screen no matter what new sort value is added.
Moving the new canvas as a direct child of the main canvas (at the end of the hierarchy) does allow the dropdown to be drawn properly, and with a simple script could be moved there and beck when opening and closing, but isn't ideal.

 

I don't really know what you are doing, but for me it works like a charm. This is what I get by default:


That's certainly wrong. After using the override sorting with an appropriate value, it looks like that:

 

My set-up also works If I move it to the direct child of the main canvas like in your image. It doesn't seem to work if its further down a branch ie: child of a child of a child and so on.

What seems very odd on further inspection, is that when i drop the dropdown menu into its own canvas as a child of the main object, it does draw over the panel of the object its attached to but the input box's and labels remain drawn over the top of the drop down menu.(even the input box's and labels on the same object) even when last or first in the objects hierarchy.

The more I play around with it, the more it feels like a bug with the UI system.

 

if you feel like its a bug please report via the bug report.

 

Showing the same technique used as in your image (note that if I tick the 'Override Sorting' box the their canvas and its children disappear from the screen and remain hidden even if everything else is moved out of the way to see if it is just being block by the other objects). And I image that's the key here, the object isnt playing well the the 'override sorting' option.
Still doing testing to try and get something that works that doesn't involve moving the dropdown menu to a different parent object.

 

The actual point is that you have to use the sorting override and make sure it plays well with the other options.

 

Yes but I'm saying it doesn't work as expected. The canvas utterly disappears (is not hidden behind other elements or obscured in any way, it just completely is not drawn.
I have removed all my scripts from a second from scratch build using only the out of the box unity assets and components and this issue is replicated.

 

Update: found the issue that was preventing me from using the override sorting option:
It was the mask on the scrollable object 'ScrollArea+Mask' (the parent of the panel the new objects list into). Upon disabling the mask, the dropdown menus in their own canvas' (with override sorting enabled) then reappear above all other elements in the main canvas.
This does however introduce a new problem of the scroll area not being masked off and interfering with the rest of the UI when scrolling.

 

There are other threads on this topic, why did you hijack this thread?

 

Apologies, I didn't realise there were other threads. I thought it was relevant to this one since it was about UI object draw ordering and usage of canvas and the graphic raycaster.

 

Late update but seems like it is the mask that's masking the drop down menu even while it is within the masks 'don't mask' area.
Removing the mask allows the menu to work properly, but the open menu is then drawn over everything else when scrolled.
As such, I made a completely different menu system that instead of drop down menu's used instead a brand new menu item hidden as default and revealed upon a button press.

 

Hi

I have an issue with Canvas overrideSorting property.
I get this errors:

m_TransformInfo.localAABB.IsValid()
UnityEditor.DockArea:OnGUI()

IsFinite(outDistanceForSort)
UnityEditor.DockArea:OnGUI()

Step to reproduce.

1) Create a canvas (the default one from the menu)
2) Click on the canvas and create a new one
3) Enable overrideSorting
4) Right click on the childCanvas and create an Image
5) Press Play to start the simulation
6) Press Play again to stop
7) Look at the console

Thanks,
Cheers

 

Nevermind, I just solved the issue n_n

To solve it, the sortingOrder value must be >= to the Canvas parent sortingOrder value.

 

hmm that should not be the case. could you file a bug about it?

 

Yes I did it

 

Any news related to this problem?

 

For version 5.0.1f1 i solved my problem by setting "overrideSorting = true" in code instead of doing it in the editor