Scrollview scrolls even if there is empty space

Unity Engine
,
1

When using a scrollview my expectation would be that as long as the elements displayed in the scrollview do not cover the whole area the elements would stick to the top and scrolling is disabled. As soon as there are more elements than space available scrolling should be enabled.

But what I actually see is that if I have only one element in my scrollview the user could move it to the bottom.

Is this intentional or is this a bug? Am I missing some settings to specify the behavior?

I create my scrollview using UXML and add the elements to it later using code in C#.

<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">
    <Style src="project://database/Assets/UI%20Toolkit/MainMenu.uss?fileID=7433441132597879392&guid=8ce16d8eca0494c43a96da937adbe094&type=3#MainMenu" />
    <ui:VisualElement style="flex-grow: 1; justify-content: center; align-items: center;">
        <ui:ScrollView scroll-deceleration-rate="0,135" elasticity="0,1" vertical-scroller-visibility="Hidden" horizontal-scroller-visibility="Hidden" name="list" style="width: 1400px; height: 2460px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;" />
    </ui:VisualElement>
</ui:UXML>

The CSS does not contain any styles for the scrollview. It is only for the elements that I add later.

I couldn’t find any hint in the documentation and google gave me a lot of results that were only related to other problems with scrollview. Does anyone have a similar problem?

2

AFAIK, The scrollview will fit the size of it’s children by default. You can check in the UI Toolkit Debugger if there any with/height set on the contentContainer in the scrollview.

Also, it could be possible that one element in your scrollview is growing unexpectedly. Again the UI Toolkit debugger would be the right tool to check that.

3

I have the same issue but it never bothered me enough to investigate. In my case, it’s only on my android phone. On PC inside editor I can’t replicate the issue.

4

Thank you SimonDufour. The size of the ScrollView was set. I have removed these settings. To control the size of the ScrollView I have created a new VisualElement as parent and have set the size for this element. Now the ScrollView behaves as expected.

I should mention that I was also developping for an android phone.

5

I have the same problem.

Yes it does in Editor, but it does not when using Android.

Can you maybe explain how you have done it? Do you calculate the height of the parent on your own, like parentHeight = itemCount * itemHeight? But what happens when the parent itemHeight gets too long? And what, if the parent has actual height: 100%?

6

I haven’t tried anything yet but maybe setting the parent “min-height” to 100% is enough

7

Thanks for the idea @vejab ! This did not work, but you brought me in the right direction.
Replacing height: 100% on the ScrollView itself, with max-height: 100% did the trick for me :white_check_mark:

1 Like