Simultaneous Vertical and Horizontal Scrolling

Hi, I've started working with UIElements this week, and I think I've stumbled into an issue regarding the ScrollView VisualElement. I'm attempting to achieve a double sided scroll, since internally, the diagram will be potentially be increasing in both dimensions. However, I can't seem to stop the #unity-content-container and #unity-content-viewport dimensions from tracking each other.

In my investigation, it seems that when I set flex-direction (in uss) to 'row' on the #unity-content-viewport, the horizontal scrolling becomes allowed, as widths of 'viewport' and 'container' stop tracking each other, and similarly if flex-direction is set to 'column', vertical scrolling becomes allowed.

Any advice on how I can achieve this functionality? Can I set the #unity-content-container to grow according to its content only? Thank you.

 

I've instantiated the ScrollView within UXML, not C#, so how do set the ScrollViewMode as such for a UXML ScrollView? I've already set show-horizontal-scroller="true" and show-vertical-scroller="true"

 

Thanks that works perfectly! Could you point to where this is documented in the UIElements documentations? Because I couldn't seem to find it and it's quite an important attribute to know about for the ScrollView VisualElement. Thanks again for the support!

 

Hi @uDamian , I would like to create an editor window, which is similar to the unity profiler, where I want to enable horizontal scrolling to see through the data horizontally.

I am wondering whether my mac book's trackpad horizontal scrolling is supported by unity UI elements or not! On the other side, this is a very basic functionality. Any help here!

The sample code snippet below.

Code (CSharp):

1. using UnityEditor;
2. using UnityEngine;
3. using UnityEngine.UIElements;
4. public class HorizontalScrollWindow : EditorWindow
5. {
6.      [MenuItem("Test/Open")]
7.      public static void ShowWindow()
8.      {
9.          var window = GetWindow<HorizontalScrollWindow>();
10.          window.titleContent = new GUIContent("HorizontalScrollWindow");
11.      }
12.    
13.      public void OnEnable()
14.      {
15.          rootVisualElement.Add(new CustomScrollView());
16.          rootVisualElement.style.flexDirection = FlexDirection.Row;
17.      }
18.      class CustomScrollView : ScrollView
19.      {
20.          public CustomScrollView() : base(ScrollViewMode.Horizontal)
21.          {
22.              style.flexGrow = new StyleFloat(1f);
23.              for (int i = 0; i < 400; i++)
24.              {
25.                  base.contentContainer.Add(new Button()
26.                  {
27.                      text = "hello: " + i
28.                  });
29.              }
30.          }
31.      }
32. }

 

Out of the box, Windows10, using the code @uDamian posted above: horizontal scrolling in UIToolkit never works on trackpads (seen it on a few Windows machines).

According to bug tracker, guessing (because Unity doesn't allow any of us outside Unity to see what the actual bug is) it appears this is a known bug that was patched in 2021 betas only: https://issuetracker.unity3d.com/is...al-scrolling-via-scroll-wheel-does-not-scroll

TL;DR: write your own Scrollview that works, or don't use UIToolkit until 2021 is out of beta.