Resolved ScrollView Issues

I am trying to make use of a ScrollView in Runtime UI. I created 4 of them:

1. Horizontal, populated by code
2. Vertical, populated by code
3. Horizontal, populated manually
4. Vertical, populated manually

As you'll see below, multiple issues come up:

1. Horizontal items get listed in vertical order. Am I doing something incorrectly?
2. The ScrollView "content-container" doesn't grow in size with addition of new items (both manual and via code) and items are squeezed in the bounds. Are we supposed to manually tweak "content-container" VisualElement size (via code) in line with child size?

Here is roughly how it looks like in the UI Builder:


Here is how it looks like at runtime:


USS:

Code (csharp):

1.  
2. .horizontal-dark {
3.     width: 300px;
4.     height: 350px;
5.     background-color: rgb(68, 68, 68);
6. }
7.  
8. .horizontal-light {
9.     height: 300px;
10.     width: 300px;
11.     background-color: rgb(102, 102, 102);
12. }
13.  
14. .vertical-dark {
15.     width: 1050px;
16.     height: 150px;
17.     background-color: rgb(68, 68, 68);
18. }
19.  
20. .vertical-light {
21.     width: 1000px;
22.     height: 150px;
23.     background-color: rgb(102, 102, 102);
24. }
25.  
26. .full-width-scrollView {
27.     width: 100%;
28.     height: 400px;
29. }
30.  

UXML:

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
2.     <ui:VisualElement name="contents" style="flex-grow: 1; background-color: rgb(221, 221, 221);">
3.         <Style src="test2.uss" />
4.         <ui:ScrollView name="scrollView-horizontal" mode="Horizontal" show-horizontal-scroller="true" class="full-width-scrollView" />
5.         <ui:ScrollView show-vertical-scroller="true" name="scrollView-vertical" class="full-width-scrollView" style="background-color: rgb(238, 238, 238);" />
6.         <ui:ScrollView mode="Horizontal" name="scrollView-horizontal-manual" show-horizontal-scroller="true" class="full-width-scrollView">
7.             <ui:VisualElement name="horizontal-dark" class="horizontal-dark" />
8.             <ui:VisualElement name="horizontal-light" class="horizontal-light" />
9.             <ui:VisualElement name="horizontal-dark" class="horizontal-dark" />
10.             <ui:VisualElement name="horizontal-light" class="horizontal-light" />
11.             <ui:VisualElement name="horizontal-dark" class="horizontal-dark" />
12.             <ui:VisualElement name="horizontal-light" class="horizontal-light" />
13.             <ui:VisualElement name="horizontal-dark" class="horizontal-dark" />
14.             <ui:VisualElement name="horizontal-light" class="horizontal-light" />
15.         </ui:ScrollView>
16.         <ui:ScrollView name="scrollView-vertical-manual" show-vertical-scroller="true" class="full-width-scrollView" style="background-color: rgb(238, 238, 238);">
17.             <ui:VisualElement name="vertical-dark" class="vertical-dark" />
18.             <ui:VisualElement name="vertical-light" class="vertical-light" />
19.             <ui:VisualElement name="vertical-dark" class="vertical-dark" />
20.             <ui:VisualElement name="vertical-light" class="vertical-light" />
21.             <ui:VisualElement name="vertical-dark" class="vertical-dark" />
22.             <ui:VisualElement name="vertical-light" class="vertical-light" />
23.             <ui:VisualElement name="vertical-dark" class="vertical-dark" />
24.             <ui:VisualElement name="vertical-light" class="vertical-light" />
25.         </ui:ScrollView>
26.     </ui:VisualElement>
27. </ui:UXML>

Controller MonoBehaviour:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UIElements;
3.  
4. public class TestUIController : MonoBehaviour
5. {
6.     [SerializeField] private string horizontalDarkClass;
7.     [SerializeField] private string horizontalLightClass;
8.     [SerializeField] private string verticalDarkClass;
9.     [SerializeField] private string verticalLightClass;
10.     [SerializeField] private int itemCount; // 8
11.  
12.     [Space]
13.     [SerializeField] private UIDocument rootDocument;
14.  
15.     void Start()
16.     {
17.         var templateContainer = rootDocument.rootVisualElement.Q<TemplateContainer> (null, "unity-ui-document__root");
18.         templateContainer.style.flexGrow = 1;
19.  
20.         ScrollView horizontalScrollView = rootDocument.rootVisualElement.Q<ScrollView> ("scrollView-horizontal");
21.         for (int itemIndex = 0; itemIndex < itemCount; itemIndex++)
22.         {
23.             VisualElement newVisualElement = new VisualElement ();
24.             newVisualElement.AddToClassList (itemIndex % 2 == 0 ? horizontalDarkClass : horizontalLightClass);
25.             horizontalScrollView.Add (newVisualElement);
26.         }
27.  
28.         ScrollView verticalScrollView = rootDocument.rootVisualElement.Q<ScrollView> ("scrollView-vertical");
29.         for (int itemIndex = 0; itemIndex < itemCount; itemIndex++)
30.         {
31.             VisualElement newVisualElement = new VisualElement ();
32.             newVisualElement.AddToClassList (itemIndex % 2 == 0 ? verticalDarkClass : verticalLightClass);
33.             verticalScrollView.Add (newVisualElement);
34.         }
35.     }
36. }

 

You have bunch of scroll-list in the same container, how are you even supposed to define its behavior?
Separate them in their own VE container and apply proper behavior for these according to the content it will have.
Read about flexbox and how it behaves with dynamic content: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

The same applies when we have just a single ScrollView. I put 4 of these to see a variety of these in action (horizontal & vertical, done via code & manual). Each ScrollView has a height of 400px, so they should not (and do not, as per Debugger) impact each other.

Sadly this has nothing to do with general flexbox concept. Flex-direction of the "content-container" becomes row, when you select Horizontal mode in ScrollView. So no reason for them to be stacked in a column.

 

Thanks for your input, Damian.

Yes, I've changed it and once you do that, it doesn't show up in the list of options to revert back to. I found it in Packages (Packages/UI Toolkit/PackageResources/StyleSheers/Generated/Default.uss) and replaced back, after which it started working as expected.

Those bits work without any issues now. Cheers!