How can I stop the automatic resizing of an Element in a Horizontal Layout Group in Unity?

Question

here is my problem: I want to have a bunch of Text-GameObjects to be evenly distributed across the screen horizontally. So I took a Layout-Group and added it onto a Panel, which is streched across the screen, with the following settings: Panel Settings

(The Layout Element on the Panel is not important here, I think, but the Panel itself is controlled by another Object to stretch across the Screen)

Now, I add the Text-GameObjects via Script. That looks like that:

                days[i].transform.SetParent(GameObject.Find("Day Panel").transform);
                days[i].AddComponent<Text>();
                days[i].transform.GetComponent<Text>().font = (Font)Resources.GetBuiltinResource(typeof(Font), "Arial.ttf");
                days[i].transform.GetComponent<Text>().fontSize = 25;
                days[i].transform.GetComponent<Text>().color = Color.black;
                days[i].transform.GetComponent<Text>().alignment = TextAnchor.UpperCenter;
                days[i].transform.GetComponent<Text>().text = shownDates[i].Day.ToString();
                days[i].transform.localScale = new Vector3(1, 1, 1);
                days[i].transform.localPosition = new Vector3(0, 0, 0);

Now I have the problem, that the width of the text-GameObjects is influenced by the length of the string I show with them. So if a text-GameObject has a 3-char-long string in it, it is wider than a text-GameObject next to it with a one-char-long string. But I need to distribute the width "fairly" between the Text-Objects, independently from what's inside.

I hope, that you can help me, Thanks :D

Answer 1

Making my comment an answer as it answers your question. You have two options to solve your issue.

The first I provided is not as robust and not modular that will work if you know the number of child objects at compile time. You can utilize the field minWidth of a LayoutElement. By setting this value as the width each element needs to be to evenly fill the space, the text object will be no smaller than the value you give it. However, if you ever add any new objects to your layout group at runtime or at any other time, you would need to recalculate these values so it is not a great solution.

The second solution which would allow for almost no work by you is to add an empty parent RectTransform to fill the space above the text object. With the layout group forcing the width and height to expand to the container, each RectTransform will fill the space evenly, while the childed text can be whatever size it needs to be. Here is the hierarchy setup of this solution:

And here is the solution working:

In the example, the parent objects are panels with Image components. I only did this to show that there is a divide between each object like you want. You can remove this component and still have the object retain its structure.