ScrollRect - How to add items and expand

Forgive me if this is a stupid question, but I am having a hard time getting a ScrollRect to work like I want it to. I was hoping that the new UI would work sort of like DIV's in HTML. Meaning, you add things to a DIV, and the DIV expands to accommodate the number of items. This does not appear to be true, or I'm doing it all wrong.

BTW, the UI docs really need to be showing screenshots for how things are set up in the Editor. UI elements are most likely going to need to be driven by code, so it's a bit odd that a lot of requirements are in the Editor, and reading the docs on Vertical Layout Groups there are no visuals as to how the hierarchy should be set up.

I am trying to make a scrolling panel for inventory items. There are various types of items, so a group of say 10 types of fruit need to be grouped under a Fruit heading. Then, Vegetables need to be listed underneath. These items are put there via code, and the item numbers could vary. I may have 20 fruits, 5 vegetables and 25 meats. I'd like the groups to expand depending on the count.

Right now, I have a hierarchy like this:

• Canvas
  • Inventory
    • ScrollRect (+ Image, Mask)
      • Content (Vertical Group)
        • Fruit Panel
          • Text Label "Fruit"
          • Grid
            • Apple Image
            • Orange Image
            • + 10 more fruits
        • Vegetable Panel
          • Text Label "Vegetables"
          • Grid
            • Carrot
            • Tomato
        • Meat Panel
          • Text Label "Meat"
          • Grid
            • Pork
            • Beef
    • ScrollBar

I am having problems figuring out what needs to be sized as what to expand vertically and contract. If I make the Content very tall, it works, but is too tall when not enough elements and too short if too many. I've tried all the various options to Force Expand and I am just not getting the logic of HOW this is supposed to work.

Do I need to keep track of all elements added and size the Content accordingly? If so, what is the point of all the alignment and scaling options with the new UI? I'm trying to make this work on all devices, and take advantage of some of the UI features for that.

Can someone explain in this hierarchy, what should be sized to allow expansion as items are added?

I have tried to use the Layout Element with Min/Max sizes, but what Panel should this be on?

 

When you want to have automatic resizing depending on elements, you need to add layout group components on all parents all the way up to the "top", which in this case is the Content. The top (the Content) should also have a ContentSizeFitter component on.

More info here, in case you haven't seen it yet:
http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html

 

Thanks! This put me in the right direction. I'll write out the details (for my own reference or anyone else setting this up for the first time)

• Canvas
  • Inventory (Rect Transform set to Center, Middle)
    • ScrollRect (Rect set to Stretch All Directions, + Image, + Mask)
      • Content (Rect set to Stretch Horizontally, + Vertical Layout Group, Child Alignment Upper Left, Child Force Expand - none, + Content Size Fitter - Horizontal Unconstrained, Vertical Min Size)
        • Fruit Panel (+Vertical Layout Group, Padding Top 10 Bottom 30, Child Expand - Width, Child alignment Upper Left)
          • Text Label "Fruit" (+ Layout Element, Min Height 30)
          • Grid (+Grid Layout Group, Start Upper Left, Start Ax Horizontal, Child Align Upper Left, Constraint Flexible)
            • Apple Image ( Image Simple, Preserve Aspect True)
            • Orange Image
            • + 10 more fruits
        • Vegetable Panel
          • Text Label "Vegetables"
          • Grid
            • Carrot
            • Tomato
        • Meat Panel
          • Text Label "Meat"
          • Grid
            • Pork
            • Beef
    • ScrollBar

Using this setup, the Inventory Rect Transform determines the overall size of the panel. Everything else fills the space, additional items in the Grid expand that section depending on the count and grid size.

 

No code required. Just take a look here -> https://unitycoder.com/blog/2016/02/23/ui-scroll-view-automatic-content-height/