Automatic height of horizontal layout groups inside vertical layout groups

Unity Engine
1

I am trying to implement a ListView / Excel-style table layout by nesting horizontal layout groups inside vertical layout groups. So the hierarchy looks like this:

  • ListView (with Vertical layout group)

  • Row 1 (with Horizontal layout group)

  • Cell 1 (with Text component and Content Size Fitter)

  • Cell 2 (with Text component and Content Size Fitter)

  • Cell 3 (with Button and Content Size Fitter)

  • Row 2 (with Horizontal layout group)

  • Cell 1 (with Text component and Content Size Fitter)
    Cell 2 (with Text component and Content Size Fitter)
    Cell 3 (with Button and Content Size Fitter)

This mostly works. The problem I have is that the height of the Rows seems to come from the RectTransform height of the Row object - which is reasonable enough as a baseline, but I want the Row height to grow to contain its cells. (Similarly, the Row width doesn’t grow to contain the Cells either, but since it doesn’t have any sort of clipping mask, this is not a problem for me.)

A Content Size Fitter seems like the right answer, as it would be able to drive the Row height based on the Cell heights. But it gives me the dreaded yellow exclamation warning because I’ve put it inside a Layout Group. Presumably the system isn’t intelligent enough to know that I want to drive the height with the Content Size Fitter and that the Layout Group won’t be doing this.

So, is there a proper workaround for this? Perhaps I need to create a new version of VerticalLayoutGroup that will respect dynamically sized contents and which will drive the row height?

2

Try checking out the “Table Layout” control in the UI Extensions project. May give you some better ideas for how to control this style of layout.
Link in my signature

3

If I understand you correctly you just need to “Control Child Size” not by the layout group but by the children themselves. Easiest way to do this: Upgrade your project to Unity 5.5. There you have such an option.

4

SimonDarksideJ - I’ll give that a go tonight, thanks.
Hosnkobf - I’m on 5.5, and I don’t know what option you’re referring to.

5

I am talking about the option “Control Child Size (width / height)” which you can enable / disable directly below Child Alignment in Unity 5.5.
If this is not what you need, I apologize for not understanding your question correctly.

6

My understanding is that those options are for setting the size of the children objects relative to the parent. That is not what I need to do. I need to have the children objects change their size based on their own children.

1 Like
7

Have you tried adding a content size fitter to Row 1 / Row 2 with Preferred Size enabled for Horizontal fit and where the width for “Control Child Size” and “Child Force Expand” is off? Should work.

Edit: Nevermind. I just realized you figured this out before but you don’t like the warning of unity. I don’t have a better approach :frowning:

8

TO alter the size of a RectTransform relative to it’s children @Kylotan_1 you use the ContentSizeFitter (as you have in your example) on the parent control.
Child controls may need a LayoutElement to override or set the preferred / min width / heights as appropriate:

ListView (with Vertical layout group) (Content Size Fitter here would size to max/preferred dimensions of Row1…Row2)

  • Row 1 (with Horizontal layout group) ← (Content Size Fitter here would size to max/preferred dimensions of Cell1…Cell3)

  • Cell 1 (with Text component ) ← (Content Size Fitter here would size to max/preferred dimensions of Text component)

  • Cell 2 (with Text component )

  • Cell 3 (with Button)

  • Row 2 (with Horizontal layout group) <-(Content Size Fitter here would size to max/preferred dimensions of Cell1…Cell3)

  • Cell 1 (with Text component ) <-(Content Size Fitter here would size to max/preferred dimensions of Text component)
    Cell 2 (with Text component)
    Cell 3 (with Button)

Hope that helps.

9

maybe you’re asking for something like this:

10

I already explained this in the first post though - like I said, “A Content Size Fitter seems like the right answer, as it would be able to drive the Row height based on the Cell heights. But it gives me the dreaded yellow exclamation warning because I’ve put it inside a Layout Group.”

So either
a) Things are going to go wrong if I do that, or
b) Unity have had this incorrect warning for 2 years and don’t seem interested in fixing it.

Do we know which one it is?

11

I only have a guess: b)
I used this setup several times already without having any issue (and I also didn’t like the warning and was wondering if something could break… but it didn’t break)