Hi all! I’ve been trying to work on a responsive menu in Unity and I keep running into this weird behaviour that is kinda really, really annoying. My menu structure is a simple 2-pane layout, with some padding on the left and right, like so:
The left and right padding panels have a flexible width of 2, and the middle two panels have a flexible width of 4, summing to 12 (my web dev background creeps into all things I do, it seems).
All panels belong to a parent object that has a horizontal layout group. The two middle panels have a vertical layout group.
However, when I add a text GameObject to either middle panel, the panel ends up expanding in width. I just want the panels to stay at those flexible widths as a maximum, with no way of going over. Any ideas?
A layout element with a flexible width and with a Vertical Layout seems to create a conflict. I managed to work around a similar layout to yours, changing just the anchors, that is:
Parent Obj
No layout, just the width you want on the transform
Child 1
Left: 0
Rigth: 0
Anchor Min X: 0
Anchor Max X: 0.1666667
Child 2
Left: 0
Rigth: 0
Anchor Min X: 0.1666667
Anchor Max X: 0.5
Child 3
Left: 0
Rigth: 0
Anchor Min X: 0.5
Anchor Max X: 0.83333
Child 4
Left: 0
Rigth: 0
Anchor Min X: 0.83333
Anchor Max X: 1
Keep in mind, that you must first modify the anchors and then the Left and Right values.
After this, you can add the Vertical Layouts to the childs 2 and 3, and put text inside them.
What I did to achieve this was divide the main parent into sections 1/12 (the 12 is the number of sections you mentioned before). That gives 0.1666667. Then, starting from 0 and child 1, I summed that 0.1666. Child 2 occupies 2 blocks, that’s why it goes from 0.16 to 0.5 directly, and the same with child 3.