Feb
23
2016

UI Scroll View automatic Content height

An article by mgear

“Hidden” inside the docs ( http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html ) you can find details how to make UI ScrollView content to have automatic size based on the child objects. Here’s images how to use it:

– Add “Vertical Layout Group” and “Content Size Fitter” components to the Content gameobject,
– Set “Vertical Fit: Preferred Size” Now your scroll bar will stretch to correct size

unity_ui_scrollview_automatic_content_height_1

– Then your Text gameobject will also have automatic height (enter any amount of text, even if Text “Vertical Overflow” is set to “Truncate”)

unity_ui_scrollview_automatic_content_height_2

*Note: If the Scroll View cannot be scrolled (as if its locked), then add UI/EventSystem to your scene (it was missing on those screenshots)

Tags: automatic, content, height, resize, scroll view, ui, width

About the Author:

.fi

20 Comments + Add Comment

Chom1k 25/07/2016 at 21:40

It helped me a lot! Thanks! I just found out your blog and Im starting to dig in! Lots of cool stuff. If I have any question about your posts are you willing to answer them? 😛 Cheers!

Reply
- mgear 26/07/2016 at 07:54
  
  Hi, yes of course, if can (but if its some generic unity question better ask in unity forums, will get more answers there)
  
  Reply
gh 10/03/2017 at 16:00

that took me forever, thanks alot

Reply
Nathan 08/07/2017 at 19:14

Great!
Worked but I had to activate “Child Control Size Width + Height” that it worked!

Reply
Simon 11/12/2017 at 02:55

very helpful, thanks

Reply
Thorium 19/12/2017 at 01:37

still perfect , thx !

Reply
Spark 19/02/2018 at 01:34

I can’t seem to get this to work in 2017.3.1f1. The Text scrolls but it’s jumpy and skips over blocks of Text. Do you know if anything has changed?

Reply
- bf2mad 12/03/2018 at 02:08
  
  I have the same problem, any ideas?
  
  Thanks.
  
  Reply
  - mgear 17/03/2018 at 17:30
    
    i tested with 2018 beta 11, didnt see any issues.. can you post gif how it looks on yours?
    
    Reply
Cascho 25/01/2019 at 17:36

Seems not to work when the blue marked Text Gameobject has a child and this child gets resized.
Tried on 2018.2.8

Reply
Richard 07/04/2019 at 05:38

Thanks so much! Really helped me out. First time I read it I somehow missed the first step, but afterwards came right.

Reply
Umar 23/10/2019 at 18:23

very Helpfull

Reply
avictor 28/10/2019 at 11:43

thanks man

Reply
unity 22/11/2019 at 10:31

Worked. Thanks.

Reply
Suryavarman 03/06/2020 at 13:50

Very helpfull.
Thank you.

Reply
OmegaAI 11/08/2020 at 18:31

4 1/2 years later and Unity still hasn’t just default added the Content Size Fitter component to the Content component. It just seems like that would be the common use of the thing! The documentation isn’t clear at all and probably should include a hint. Instead, game developers spend half a day trying to figure out how to access the rect transform height and modify it with a clever algorithm based on actual content (not the component) size to no avail!!

In 2020, this blog post is still as helpful as it was at the time of writing.

Thanks!

Reply
mgear 13/08/2020 at 19:20

fit image to text bounds
https://aillieo.cn/post/2019-05-22-unity-3d-notes-05/

Reply
Joe Hocking 15/01/2021 at 13:44

Short and sweet explanation that helped me out. Just want to add for others looking this up, note that the scroll view itself (not just the content within it) is also a static size by default.

In many layouts you want that, but if you want the scroll view to be dynamic too (so that it resizes to different screens) then make sure to change the scroll view anchoring to Stretch.

Reply
wizard of oz 16/01/2021 at 23:33

thank you . exactly what i was looking

Reply
Thomas Touzimsky 11/03/2023 at 11:37

Greetings from 2023 – still useful to this day! 🙂

Reply