How do I build a correctly aligning vertical scrollview table?

[Tiktaalik]

I am able to build a table in a vertically aligned scrollview but I don't really understand why I have to do what I have to do to make it work. As well the method I'm using doesn't work with the new anchor system. All of this makes me think I'm doing this incorrectly and so I thought I'd post to make sure there isn't some proper correct method that I've somehow missed.

I have constructed an ultra basic scene hierarchy as such:

1. UIRoot (UIPanel)
2. -->Camera
3. --> --->(UIPanel)(UIScrollView)(UITable)
4. --> --> -->(TableCell)
5. --> --> -->(TableCell)
6. --> --> -->(TableCell)
7.  

If I align my scrollview panel at 0,0,0 with the following options:

1. UIPanel with ScrollView, UITable
2. Transform
3. P: 0, 0, 0
4.  
5. Clipping:
6. Offset: 0, 0
7. Center: 0, 0
8. Size: 300, 300
9. Anchors:none
10.  
11. Cells
12. Transform
13. P: 0,0,0
14. UIWidget Pivot: Centre, Centre
15.  
16.  

It looks like the following:


When I run the game I get this:



Doh! it's not aligned right! It appears as if the top corner of my cell is placed at the centre point of the clipping.

Here are my steps to fix:
- Change the Panel Clipping "center" variables such that the location is at the same position as the centre of the Panel. (in this case -150, 150)
- Change the transform of the Panel such that the clipping area appears where you want it.

1. UIPanel with ScrollView, UITable
2. Transform: -150, 150
3. Clipping:
4. Center: 150, -150
5. Size: 300,300
6. Anchors: None
7.  
8. No change to Cell.
9.  

So now I have:


and when I run I get the correct looking results:



Essentially my problem is that I have no idea what I just did or why I had to do it. This seems like a random hack and I don't know what I've just done.

Furthermore if at this point I try to use the new anchoring system to parent this scrollview panel to some other panel then this will be broken immediately as the anchoring system modifies the position of the scrollview panel.

What is the correct way to build the screen that I've shown in the final image?

[pretender]

I am interested in this too!

[VapapeurTeam]

I've had the same results, I can't figure out what I'm doing wrong.

My problem with the anchoring system goes even further : I want my TableCells to stretch when the resolution changes, and usually I'd do that by adding a UIWidget to the root of each TableCell and setup its anchor so it stretches correctly with different ratios and resolutions. However, defining an anchor for the TableCell widget means its position is also locked, so it can't be moved around by the UITable. I'm able to have my UITable itself stretch correctly, but since I can't use anchors on the table elements, they don't stretch. Any help ? Am I doing something completely wrong ?

Thanks.

[ArenMook]

The table script needs to go below the scroll view. You can't place it on the scroll view itself.

[Tiktaalik]

The table script needs to go below the scroll view. You can't place it on the scroll view itself.

Unfortunately moving the UITable doesn't change anything.

My scene now looks like:

1. UIRoot (UIPanel)
2. -->Camera
3. --> --->(UIPanel)(UIScrollView)
4. --> ---> --->(UITable)
5. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
6. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
7. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
8.  

[ArenMook]

Yup that hierarchy is fine. You also need to ensure that you don't anchor widgets fully. For example if your scroll view moves left to right, then only anchor widget's top and bottom. Restrict their aspect ratios if you want to adjust the width and height. Don't anchor left and right.

[Tiktaalik]

I get the same odd behaviour regardless of whether I include the correct anchors you suggest or no anchors at all.

Is this behaviour of the table appearing to the side the expected behaviour that you designed? If so I am surprised as it is not obvious that it should behave in this fashion.

If this is not the desired behaviour, and this is a bug, then I think you should attempt to recreate the problem in a basic scene using the hierarchy I have shown as it appears that I am not the only one that is seeing tables work this way.

[ArenMook]

Can you create a repro case for me in a clean scene so that I can better understand what your issue is caused by? Just don't post it here -- send a download link to support@tasharen.com please.

[Tiktaalik]

Email sent thanks.

[ArenMook]

Got it, thanks. Your issue is simply in the fact that you never actually executed the table you have. It doesn't execute until after you hit Play unless you right-click the component and choose Execute.

So nothing was actually aligned at all.

[Tiktaalik]

Got it, thanks. Your issue is simply in the fact that you never actually executed the table you have. It doesn't execute until after you hit Play unless you right-click the component and choose Execute.

So nothing was actually aligned at all.

If you select Execute you get the following result:



Cells are still off to the side.

To me it looks like the table cell is being positioned such that its top left point is positioned to the Center point of UIScrollView. Is that how this feature is supposed to work? It looks like either there is a bug here, or some setting I have is incorrect.

Is there a special way that cell UIWidgets need to be constructed or UITable needs to be organized for this to behave as expected?

Currently in this project we have:

1. UIScrollView
2. Transform: 0,0,0
3. Clipping: Alpha
4. Offset: 0,0
5. Center: 0,0
6. Size: 300, 300
7.  
8. Table Cell UIWidget
9. Transform: 0,0,0
10. Pivot: Center, Center,
11.  

After execution the Table Cell UIWidget's transform becomes 150, -50.

[kitgui]

Just putting my two cents into this discussion, the UITable script appears to start positioning it's elements always beginning from it's own position, leading downwards and to the right.

So if you move your UITable GameObject to the upper-left bound of your Scrollview, you might get what you want.

[Tiktaalik]

Just putting my two cents into this discussion, the UITable script appears to start positioning it's elements always beginning from it's own position, leading downwards and to the right.

So if you move your UITable GameObject to the upper-left bound of your Scrollview, you might get what you want.

Yeah that's the fix that we've been using to have our tables appear correctly, but I wanted to bring this up because it's pretty confusing and I wasn't sure if this was the intended behaviour for the UITable or a bug.

[Highstorm]

Do you have the "Content Origin" of your ScrollView set to "TopLeft"? Do so, and then right-click on the UIScrollView component and choose ResetClippingPosition. This should re-position your table to the top-left of the scroll view, or any other origin you choose.

To do this in code, call UIScrollView.ResetPosition();

Does that help with your issue?

[Tiktaalik]

Do you have the "Content Origin" of your ScrollView set to "TopLeft"? Do so, and then right-click on the UIScrollView component and choose ResetClippingPosition. This should re-position your table to the top-left of the scroll view, or any other origin you choose.

To do this in code, call UIScrollView.ResetPosition();

Does that help with your issue?

I've played around with Content Origin, and while I can see how it's modifying the position of the content, the table still seems to start positioning its child objects at its origin.



What happens here is that when I select ResetClippingPosition the clipping offset get set to 0, -99 from 0,0 and transform is set to 0, 99, 0 from 0, 0, 0.