ScrollView with dynamically and varying sized elements

Hello,

I am trying to build a scrollview of buttons which can expand/collapse when clicked

Something along these lines:




And then imagine you click on one of these scrollview elements and you get something like this:



But ideally without things overlapping like that obviously.

Could anyone give me any pointers on how I can do it?

I've followed this excellent tutorial for the basic setup of my scrollview:

https://unity3d.com/learn/tutorials...ing-archive/creating-scroll-lists-at-run-time

And the techniques described there work very nicely for my basic scrollview but when I try to do things like this it all falls apart.

I seem to have tried every possible combination of Layout Group, Layout Element, Content Size fitter, Text Alignment and Overflow, Best Fit... Nothing seems to work


In the screenshot above each scrollview element (row) is a vertical layout group containing two gameobjects one for the "Icon and Hint #" group and one for the hint text. My hope was that sticking a content size fitter on the hint text gameobject would automatically push other rows down. As you can see that doesn't seem to be happening.

Here's a screenshot of the hierarchy too for further clarity.



Many thanks and appreciate any help anyone can offer!

 

If you are using Vertical Layout Group, and each item has a Layout Element, could you not just modify the min height of the Layout Element?

 

Hey ehdeekay, thanks for the reply.

I think I might have answered my own question...

While randomly trying to change various parameters to get this to work I noticed that the Vertical Fit property of the Content Size Fitter on my ScrollView's ContentPanel was set to "Min Size". I have now changed this to "Preferred Size" and it looks like things work as intended. I can append text in my HintText and it will push the other elements in the scrollview down accordingly.

Still feel like I am not perfectly understanding how I got this to work, but it will do for now...