Text with ContentSizeFitter doesn't scroll within ScrollRect?

Unity Engine
1

I have a ScrollRect set up with the following hierarchy:

ScrollRect

Viewport (with Mask component)

Content (with Text and ContentSizeFitter)

Viewport and Content are both referenced in the ScrollRect. I checked, and the Content seems to be resizing properly with ContentSizeFitter set to PreferredSize. Text is dynamically added to Content until it becomes bigger than the ScrollRect, and therefore needs to be scrolled. However, nothing happens when I change the ScrollRect’s verticalNormalizedPosition (I’m doing this through code because my game doesn’t use the mouse).

Do I have this set up correctly?

2

Try it like that:

ScrollRect

Viewport (with Mask component, VerticalLayoutGroup and ContentSizeFitter)

Content (with Text)

I think this is actually the proper way to use the content size fitter. Now you could also add multiple texts and they would align with the rest and the scrollrect would still work :slight_smile:

3

Thanks for the reply. Hm, that doesn’t seem to be working either. If the Content doesn’t have a ContentSizeFitter, it doesn’t change size as more text is added. What’s the VerticalLayoutGroup in the Viewport for?

4

I should have been a bit more precise:

3489053--277797--upload_2018-5-8_9-12-19.jpg
3489053--277797--upload_2018-5-8_9-12-19.jpg3840×2100 549 KB

The vertical layout group is necessary to change the size of the children and add padding to the sides

1 Like
5

Ah, I see. So the VerticalLayoutGroup forces the children to expand to their max height, and the ContentSizeFitter forces the Content object to expand along with its children? Something like that?

It’s working now, at any rate!

6

Yep pretty much. Normally the vertical layout group with control child size forces the child to fit within the size of the rect transform. A bit counter intuitive to use this combination, but it is the one that does the job perfectly. You can also use padding (as already noted) to have a bit more control over the size of the children (or the border of the parent, however you put it). This would be useful for message bubbles for example :slight_smile: