[Solved] Scrolling dynamically-sized text

Unity Engine
1

Yes, this thread again. My latest n00b adventures involve deciphering the GUI system. I’m doing a little test-harness for a dialogue experiment. This seems like a simple problem but I’ve been butting my head against it all morning. Every thread / video / blog post I can find on the topic seems to assume a statically-sized text object.

The program periodically adds new lines of text to a Text object, and when the Text object vertically expands beyond the size of the masked area, I want the Scrollbar to automatically update to reflect how much content is off-screen (masked). Nothing oddball there, scrollbars have worked this way for decades – except in Unity, apparently. Additionally I’m setting the Scrollbar value to the bottom with the intent of showing the newly-added content.

The part which works is that the textbox grows and the masking clips it at the bottom.

One problem is that the scrollbar seems to ignore the size of the text content. As the content exceeds the mask area, the scroll Handle stays full-sized; it does not indicate there is content off the bottom of the screen, nor does it respond to setting the value to scroll all the way down.

Another stranger problem is that if I manually grab and drag the Text content (once it has grown beyond the mask bounds), the scroll Handle (which occupies 100% of the Sliding Area) starts to shrink proportionally with how far I drag the Text. Then for some reason it bounces back to the top.

The hierarchy is like this, which I believe to be correct:
2579714--180245--1.jpg

The various important-seeming non-default Inspector settings are:

Canvas, Panel - at defaults

ScrollRect Mask - Content is the Text object; Vertical Scrollbar is the Scrollbar object; Horizontal is unchecked

Text - pivot anchored to the top of the parent (I believe this makes it expand downward as it resizes, maybe this is the problem?); stretch is horizontal only; Horizontal is Wrap; Vertical is Overflow; Align is left / top

Scrollbar - Direction is Bottom To Top

The test-code is dead simple:

    public void ButtonClick_Reset()
    {
        dialogue.text = "";
        lineCountdown = 100;
        nextTick = 0f;
    }

    void Update()
    {
        if(lineCountdown > 0 && Time.time > nextTick)
        {
            dialogue.text += "this is line " + lineCountdown.ToString() + "\n";
            dialogueScrollbar.value = 0f;
            lineCountdown--;
            nextTick = Time.time + 0.1f;
        }
    }

So what am I missing?

2

I removed the Content Size Fitter from the Panel and added it to the Text object, and changed Vertical Fit to “Preferred Size”. It shows the “Parent has a type of layout group component” warning, but I read that can be ignored, so I tried it.

Now the text grows and the scrollbar resizes itself as expected. I really don’t understand why that change fixed anything.

There is a new problem; when the text box is smaller than the mask, it is vertically centered in the masked area. The pivot anchors seem to be ignored (they are at the top of the mask).

So close!

So baffled!

(As a side note, the Unity docs for these options are useless, it looks like somebody from Microsoft wrote them. So “Preferred Size” sets the content to the preferred size, eh? I never would have guessed!)

3

Everybody likes pictures. The first one is before I click “Reset” to load up the text box. The second one is with the list partially full (not exceeding the masked area). The third one shows the scrollbar functioning properly once the list exceeds the masked boundaries.

2579755--180253--1.jpg

2579755--180254--2.jpg

2579755--180255--3.jpg

4

By thrashing around trying random things, it turns out if I manually edit the Rect Transform’s Pivot Y value to 1.0, then it works. In the Editor it still floats around in the middle, but at runtime it moves to the top where I want it. I have no idea why it resets it’s position when I drag it – seems like a bug – but at least it’s working now.

5

I was working on something similar, and it took me a while to get it working too. This post (and a few others) helped me figure it out.

I wrote up detailed instructions on how to do it here: Creating a resizeable (endless) scrollview in Unity3d - ZeeFin Games

6 Likes
6

BIG Thanks @MV10 , you saved me from hours of debugging and frustration :slight_smile:

7

Years later, this helped. Thank you!

8

Thanks. Adding a Content Size Fitter fixed everything in 2 seconds. No idea why it isn’t in the default scroll view.