Scroll list items clickable outside of clipped panel area.

[JRoch]

Hello folks,

I have a simple window, with a vertical scroll list defined as the standard UIPanel, UIScrollbar, UIGrid, and sub-items that I add at runtime via NGUITools.AddChild.  The children have UIDragPanelContents attached to the topmost object, which also has the collider attached.

Two behaviors that I'm trying to remedy:

1.  The list populates and builds properly.  However, it starts mid-point (center point) of the scrollable area.  Is there a script method I should be calling to get these items to flow correctly top-down in the panel area rather than have them flow middle-down?  [edit:  the first time you touch the scroll bar with the mouse it properly repositions the content and re-sizes the scrollbar.  I'm sure I'm just missing a simple method call to make this happen at the end of list creations.]

2.  Clipped items (in both hard and soft clipping) are still clickable.  I noticed this because items flowing off the bottom of the window, while invisible, are still "over" the "OK" button... and trying to click the OK button results in selecting a list item if the list extends out of the clipped area and over the button area.  Shouldn't the collider for list items also be disabled as they exit the clipped area?

[dlewis]

For the 2nd problem you need to add colliders which are in the clipped area to block input (The colliders will need to be closer to the camera than the items they are covering). Check out example 7 in the NGUI project.

[JRoch]

Ah, so add box colliders that cover the rest of the screen real estate where the Scroll List could potentially be, and make sure to bump all of the other controls of the same panel upwards in -Z so they're above the scroll list and... uh... click occlusion colliders.  That's pretty damn inelegant.  I can see how it would work, but it sure seems like it would be reasonably easy to do an intersection of the UIPanel that is clipping and the colliders that are children of it and ignore any clicks that aren't within the clipped area.

[ENAY]

I had both of these problems. For the 1st problem, I would click in the window and get the menu to appear how I wanted it. I would check out the inspector and note down the x,y,z and then I would simply apply a localPosition transform directly after creating the menu. Poor way of doing it really, but it worked.

I have almost come to the conclusion that this is a bug in NGUI.

[ArenMook]

You can call UIDraggablePanel.UpdateScrollbars(true) if you wish to update them after instantiating your grid's children.

[JRoch]

Thanks for the quick reply, Aren.  Didn't work, but I'm sure I just need to figure out if I'm calling it in the correct fashion at the correct time.  Should there be any need to wait for an update cycle to call this?

Here's a small desktop capture video I did of the issues in question.  Ignore issue #1 while I dig in the docs.  However, I just want to verify that it is indeed necessary to create extra colliders to "obscure" the items outside of the clipped area so that you can't click on them.

http://ui.gameparadigm.org/ScrewyScrollList.mp4

And a new item:

3.  As you can see in the short video, when the scroll bar thumb bumps up against the top of the range it shrinks by a few pixels, and at the bottom of the range it expands by a few pixels.  What is up with that?  I believe I'm using the latest & greatest version of NGUI.

[JRoch]

While this may be a re-hash, I'm going to go ahead and document answers to my simple questions... so others with similarly n00bish questions won't have to keep searching.

Q:  How do I make my newly dynamically populated Scroll List re-flow such that it fills the clip panel from the top down and re-calculates the attached scroll bars?

A:

1. UIDraggablePanel thisDragPanel = this.gameObject.GetComponent<UIDraggablePanel>();
2. thisDragPanel.UpdateScrollbars(true);
3. thisDragPanel.ResetPosition();
4.  

Q:  How do I keep non-visible (out of clipping panel bounds) child colliders from being clicked?

A:  Mask off areas of the screen where the list would be if it weren't clipped/hidden.  Do this using gameobjects with colliders that have enough of a -Z offset to intercept the raycast caused by the mouse click.


I still think there must be a way to code in auto-generation of masking off the clipped items, or perhaps disabling the colliders of the clipped items.  (But I'm not industrious enough to try my hand at coding it myself.)

Still wanting to hear back if that weird little shrink of the scroll bar thumb shouldn't be happening...

[ArenMook]

You might also want to call UIGrid.Reposition() after instantiating your children, and before updating the scroll bars. Otherwise they don't get repositioned until next frame.

[JRoch]

I cut down the code to try to make it clearer, but what you mention is exactly what happens in the prior two lines of code:

1. UIGrid panelGrid = this.GetComponent<UIGrid>();
2. panelGrid.Reposition();
3.        
4. UIDraggablePanel thisDragPanel = this.transform.parent.gameObject.GetComponent<UIDraggablePanel>();
5. thisDragPanel.UpdateScrollbars(true);
6. thisDragPanel.ResetPosition();
7.  

The script that contains this is attached to the gameobject that has the UIGrid attached and is a child of the gameobject that is the UIDraggablePanel.  This gameobject is the parent of all instantiated scroll list children.