UIPopupList issues with sliced sprite

[Holy Manfred]

I am having some issue with our drop down menus.
It is basically a regular UIPopupList using normal sliced sprites for the background and the buttons. It seems like the amount of border set in a sliced sprite is offsetting the positioning of the list.
This can be reproduced in NGUI 3.9.9 / Unity 5.4.0f3:

1) Open NGUI example scene 'Example 0 - Control Widgets''
2) Change border of the 'Button' sprite to something higher, e.g 9
3) Play and observe popup list being slightly offset

With larger sprites with a bigger border the issue is more obvious of course. Not sure if this is intended behavior but I would expect the amount of border within a sliced sprite not to matter.

[ArenMook]

Right, this is intentional. Border always offsets the content. This is so that when you have something like curved borders the content doesn't go outside of the background in the corners.

You can adjust the padding on the popup list under the Font section. Negative values will work just fine.

[Holy Manfred]

Thanks for the suggestions. However the padding does not really fix the issue for me. Every pixel of bottom border in the sprite makes the background overlap on the y axis. With borders >10 pixel it is really obvious.
I attached a screenshot showing the issue with the Button and the example scene.

A border of 9 pixels doesn't really make sense for this Button sprite of course, I increased it only to demonstrate the issue.

[ArenMook]

This happens because the size of your selection is noticeably bigger than the size of your rows. You need to increase Y padding on the popup list in order to compensate. This will space out your rows.

[Holy Manfred]

Yes, the padding does help to have the selection aligned properly. However, my issue was rather with the background sprite (selected in above screenshot) of the list. It is overlapping the popup list button by its border amount.

I hack-fixed it for me by changing UIPopupList.cs around line 950 to:

1. bool placeAbove = (position == Position.Above);
2.  
3.   if (position == Position.Auto)
4.   {
5.     UICamera cam = UICamera.FindCameraForLayer(mSelection.layer);
6.    
7.     if (cam != null)
8.     {
9.         Vector3 viewPos = cam.cachedCamera.WorldToViewportPoint(startingPosition);
10.         placeAbove = (viewPos.y < 0.5f);
11.     }
12.   }
13.   if (placeAbove)
14.         mBackground.cachedTransform.localPosition = new Vector3(0f, bgPadding.y * 2.0f, 0f);
15.   else
16.         mBackground.cachedTransform.localPosition = new Vector3(0f, 0f, 0f);
17.  

That fixes the issue in my specific case but might break other stuff. I am not quite sure why background sprite is supposed to overlap the button. You would always want the background sprite to start where the button ends, or not?

[ArenMook]

Oh, I understand what you mean.

You can do it natively by altering 3 lines in UIPopupList.cs

Line 950:

1. mBackground.cachedTransform.localPosition = new Vector3(0f, bgPadding.y, 0f);

Change to:

1. mBackground.cachedTransform.localPosition = new Vector3(0f, 0f, 0f);

Line 976:

1. float x = 0f, y = -padding.y;

Change to:

1. float x = 0f, y = -padding.y - bgPadding.y;

Line 1059:

1. mBackground.height = Mathf.RoundToInt(-y + bgPadding.y);

Change to:

1. mBackground.height = Mathf.RoundToInt(-y);

[ArenMook]

Actually, it needed more work. Here's a modified file that will be in the next update that doesn't overlap the border by default. In addition, it has an "overlap" field that you can explicitly specify in pixels if you do want some overlapping.

[Holy Manfred]

Thank you so much. Works beautifully!