Unity UI Scroll and child with dynamic size

How to create something like this (without code)?

Code (csharp):

1. scroll (Scroll Rect)
2. -viewport (Mask)
3. --content (ContentSizeFitter + VerticalLayoutGroup)
4. ---item.prefab (VerticalLayoutGroup)
5. ----background
6. ----title_label (LayoutElement with preffered size)
7. ----child_items (LayoutElement? + VerticalLayoutGroup)
8. -----item1
9. ------left_label (any text/multiline)
10. ------right_label (one line)
11. -----item2
12. -----...
13. -----itemN

 

Sounds like you already have a fairly specific idea of how to create it using standard Unity UI components. What trouble are you running into?

(One hole I notice in your description is that the "background" should probably have a LayoutElement component with the "ignore layout" box checked.)

 

left_label doesn't scale item. If add ContentSizeFitter I get something like this

 

OK, so your problem is that your ContentSizeFitter isn't correctly determining the preferred size of your text? Could you describe exactly what components you have attached to left_label?

 

Preffered size of text is correct (with size fitter), but parent (child_items and item.prefab) dont change.
left_label has only TMP UGUI and I trying attach ContentSizeFitter

 

I want to display text of any size in runtime, but without custom ui code

 

It looks like child_items has both a vertical size fitter AND a layout element? Probably the layout element is preventing it from resizing, because it thinks you want it to stay at the size specified there. Try removing the layout element from child_items?

 

It work. Thanks! But sorry, I give the wrong hierarchy. Can you help with it (edited: added item in child_items)?

In edited case I just have list of items with bg and two columns.

 

Perhaps "item" can use a Horizontal Layout Group for laying out its two columns?

 

Wow! That works! Thanks!

Code (csharp):

1. child_items (Layout Element + Vertical Group with control size)
2. -item (only Horizontal Group with control size)
3. --left_label (only TMP)
4. --right_label (only TMP)