Background and Foreground Popup List

[capitalj]

Hi,

I am having a strange issue with the popup list where the background element overlaps the foreground element as in the screenshot.

Is there a way to get the background to start where the foreground button ends? and also is there a way to control the background so that it appears behind the foreground (say I wanted it to actually overlap a bit).

-JJ

[ArenMook]

Behind -- no. If you want to change where it appears (seriously, is anyone going to care about this?), modify line 457 of UIPopupList.

[capitalj]

Well, we care about the graphics of our game, that's why we bought NGUI...

Anyways, my main question is why does the background overlap the actual foreground sprite element? In the NGUI example of the popup list the background starts just below the button, but mine starts higher for some reason and it doesn't look very good.
Shouldn't the background of the dropdown that gets created start based on the height of either the height of the foreground button sprite or the collider of the popuplist (both of which I have the same size, and I am using sliced sprites for all parts of the popup list)?

[ArenMook]

I intentionally made it start at the beginning of the border rather than the end, making borders effectively overlap. Less space wasted gives more room for content. Just modify the line I mentioned if you want to change its behavior.

I come from a background where it was HQ's uttermost pleasure to pick on every single tiny thing in games, whether it was important or (in 99% of the cases) not. When time is wasted on nit-picking, it's frustrating for devs who try to focus on really important concepts, such as fun gameplay and extra content. So as you can imagine a question like this hits close to heart...

[capitalj]

Actually, maybe the effect is not clear from my screenshot, the background doesn't just overlap the border of the foreground button, it covers a bigger portion of the button and looks bad when actually animated, it's obvious that there is something wrong rather than just a 1-2 pixel nit pick. It's more like around 10 pixels of the button, so it's probably something wrong going on and not the intended effect as per the example project, which looks good in my opinion.

Also, what does the X Padding do of the uipopuplist? The Y padding works great to separate the elements in the list but the X padding doesn't seem to do anything for me.

[ArenMook]

Right now -- nothing. It used to do something before I changed the way the popup list shows up, and now it's unused.

[capitalj]

Ok cool.

So any thoughts on why the background is overlapping my button so much?

[ArenMook]

Yup, it's using your sprite's border size. Border overlapping border, and you happen to have a thick one. As I mentioned, just modify that line if you want the behavior to change.

[capitalj]

Ah, ok, I think I understand now. It's the border property of the sliced sprite itself. Thank you.

[capitalj]

If there's a spot for feature requests, I'd like to add the ability to support rounded corner sliced sprites in the PopupList and ScrollBar widgets. I just tried to add a rounded corner foreground element to the scroll view and when it gets resized to fit the scroll bar background, the border of the foreground sliced sprite appears outside of the background. Here's an example screenshot of both the way it should look and the way it looks now. (unless I'm doing something wrong that is)

[ArenMook]

The foreground size automatically matches the background size. Looks like your background's dimensions are bigger.

[capitalj]

I guess that must be because the background is a square shaped sliced sprite so it's borders are only 1 pixels wide while the foreground's borders are much larger (10 pixels or so). Giving the background sprite's the same border size as the foreground's border should fix it right?

[ArenMook]

No, it's based on the actual size. If the background's transform is 200x30, then the foreground's transform will also be 200x30.

[capitalj]

Ah, ok, well in that case something is wrong. I've set my background transform x scale to 48 and when the game is run the foreground gets scaled to transform X of 101 (which looks like it just adds the border to the transform scale of the foreground as that is the only part of the foreground that overlaps the background), and the Y scaling overlaps the end of the scroll bar (as per the screenshot) by the border height.

If I try to adjust the scale of the foreground to match during runtime, it just scales right back to this large size.

The UIScrollBar gameobject parent has a scale of 1 for each axis, and all the parents of that also have 1 as the scale (except for the UIRoot object that has a scale of around 0.002..., but I think that is just set by the NGUI system, no?).

[ArenMook]

Oh wait, you said scroll bar, not slider... I was looking at the wrong widget. Yes, scroll bar does indeed use the border. I'll eventually change the slider to behave the same way.