TextField cannot scroll horizontal AND vertical in 2021.3.4f1

Unity Engine
,
1

I have a TextField with a lot of text.
Thus, the TextField is in a ScrollView.

When I set the ScrollView to “Vertical” then the TextField can be scrolled vertical.
When I set the ScrollView to “Horizontal” then the TextField can be scrolled horizontal.
When I set the ScrollView to “Vertical and Horizontal” then the TextField can be scrolled horizontal but not vertical.

In the UIToolkit debugger, I see that the TextField does not have the full height that it needs. This is different when using “Vertical” scroll mode. However, the TextField is always using the same settings, including height “auto”.

Is this a known issue? Or do I have to change some styles maybe?

I’ve read there is a TextField that can be scrolled in Unity 2022.1 ( forum post ).
However, I had other issues with Unity 2022.1. Thus, I would like to know how to make a vertical and horizontal scrollable TextField in 2021.3.

Thanks!

2

Hi @achimmihca ,

I spent some time trying to repro in 21.3.4f1 without success. When I enter new lines in my text field, the vertical scroll bars seemed to appear as expected. Could you provide a repro?

Thanks

3

I created a minimum reproducable example and created a bug report (I received an E-Mail: “CASE IN-10350”, maybe you find it in your issue tracker).

The issue seems to be “flex-grow” property that I set on the TextField.
The following UXML reproduces the issue. No scrollbars appear even when adding enough text that it needs to scroll.

<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/Scenes/SampleSceneStyleSheet.uss?fileID=7433441132597879392&guid=dc943b3bad228fe44a7ca909a847eb20&type=3#SampleSceneStyleSheet" />
    <ui:VisualElement name="background" style="width: 100%; height: 100%; align-items: center; justify-content: center; padding-left: 30px; padding-right: 30px; padding-top: 30px; padding-bottom: 30px;">
        <ui:ScrollView scroll-deceleration-rate="0,135" elasticity="0,1" name="scrollView1" mode="VerticalAndHorizontal" style="flex-grow: 1; width: 100%;">
            <ui:TextField picking-mode="Ignore" name="textField1" multiline="true" style="flex-grow: 1;" />
        </ui:ScrollView>
    </ui:VisualElement>
</ui:UXML>

Anyway, workaround for me is not using flex-grow property. This does mess up the layout a little, but at least I can scroll.