Scale Layout elements to fit screen

Hello, so I usually set the anchors of a UI element to the corners of that element. After that the UI element scales 100% how I want it to.

But I now have to use a vertical group layout to make rows, and when I change the screen size, the layout doesn’t scale accordingly.

Image 1

So here is the image of the rows, As you can see on the sides is a massive gap. (I'm not worried about it vertically, as the rows spawn in dynamically) ![109507-incorrect.png|1100x345](upload://atuANMEXrkGiQoogSJ2oMhgT48S.png)

Image 2

On the left is the actual line, while on the right is the parent holding each line. ![109508-layout-groups.png|706x624](upload://ejaYS5g1QzM7Lz3qqetGgtywHEZ.png)

Now what I’ve tried is setting the preferred width to the screen size, but that does not appear to work.

tempHolder.GetComponent<LayoutElement>().preferredWidth = Screen.width;

I’ve also tried playing with the canvas scaler but I don’t think that right. Any ideas would be really appreciated.

Looks like you need to set a resolution for your play mode.


My mistake was setting each anchor to the corner of a line.

Setting the anchors to the top 2 corners only, prevented the line from scaling horizontally, and allowed me to scale to holder vertically.

I did have to make a custom vertical layout script though.