Dynamically and automatically change Scrollview's content height among Text length

Hello,

What I want to do looks like it's pretty simple but I can't figure out how to do that.

For an easier comprehension, please take a look at the image I uploaded with this post.

I have a Scrollview with a Content containing 2 panels on a vertical layout : red panel and blue panel below the red one.

The "red panel" is fixed, its size cannot change.
However, the height of the "blue panel" depends on the size of the Text component of its child.

What I want to do is :
-> When the text is short, define the minimum height of the blue panel in order that : red panel's height + blue panel's height = screen height
-> When the text is too long, the height of the blue panel and its parent Content gets bigger in order that the user can scroll the view and read all the text.

How can I do that ?

Thank you in advance !

 

Hi,

I am attaching a unity package which contains a sample of what you want to achieve. Hope this helps you. If you have any doubts about the package you can ask me.

note: this unity package is exported from unity 5.5 so make sure you have latest version installed.


In this image you can see that, fist object have only one line of text so it maintained the minimum height, and the last one have more text so it stretched according to content size, i guess this is what you wanted.

 

Thank you very much, it's very nice !

I also successfully did it by myself with this hierarchy :

Scroll View (with Scroll Rect)
-> Viewport
---> Content (Vertical Layout Group, child control size width/height and child force expand width/height + content size fitter with vertical fit preferred size)
-----------> RedPanel (with LayoutElement min height 500, preferred height 500, because its size must not change)
-----------> BluePanel (with HorizontalLayoutGroup with child control size width/height and child force expand width/height and content size fitter with vertical fit preferred size)
------------------> Text (with horizontal overflow wrap and vertical overflow overflow)

When the text inside the blue panel gets bigger, the blue panel fits it and the Content game object do it too so that the user can scroll and read all the text.

However I have a warning on Content Size Fitter attached to the blue panel : "Parent has a type of layout group component. A child of a layout group should not have a Content Size Fitter component, since it should be driver by the layout gorup." so I'm not sure I get the best solution to manage it, even if it works.

 

Well done! Thank you both for getting this working.
It's strange that the working configuration throws warnings about having nested content size fitter controls.
But the ScrollView is still new, I'm sure it'll get better in future releases.

 

Thank you @Snake9, worked perfectly!