Resizing a RectTransform width when adding instantiated children

Hi Guys,

I am trying to create a horizontal list where I can add content along with scrolling.The issue I have reached now though is that the RectTransform on the content holder doesn't resize which either means that I can't have scrolling (because the width is too small to allow for scrolling) or the width is set too large that content is able to scroll off screen. The list I am creating won't have an exact number of children that it can hold either.

Is there a way that I can update the width of the transform when adding a new child?

Thanks.

 

There's a component called Horizontal Layout Group which is supposed to autoscale the RectTransform. However it's not working the way it should yet (or I'm doing something wrong) as it scales all the content to fill the panel and not the other way around.
You could just get the preferredWidth parameter from the HorizontalLayoutGroup and then assign its value to rectTransform.sizeDelta.x whenever you add a new child to the panel (or within Update()). I'm not sure if it's the most efficient way but it should do the trick till UT get all the bugs ironed out.

 

Thanks for the reply. I have noticed that the min width property on the layout changes to the correct value when adding new content. But I can't seem to update the width on the RectTransform using either:

Code (CSharp):

1. cardHolder.sizeDelta.Set(width, cardHolder.sizeDelta.y);
2. cardHolder.rect.Set(0, 0, width, cardHolder.rect.height);

 

Try

Code (CSharp):

1. rect.sizeDelta = new Vector2(width, cardHolder.sizeDelta.y);

 

That works now. Pretty sure I tried that earlier and I got some error from that. Think I shall extend it further now by extending the horizontal group and doing more logic there rather than outside in another class

Thanks

 

I'm using Grid Layout Group instead, just make it a single row for horizontal groups or a single column for vertical ones, no coding needed.

 

I just tried that method and I run into the same issue I had earlier. I'm not sure on how to force it to a single row, but I can't set the width to a massive size to keep it horizontal as I can loose the contents when scrolling. I extended the horizontal group and set the width whenever we calculate the layout and that works perfectly for what I need

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3.  
4. public class HorizontalList : HorizontalLayoutGroup
5. {
6.     public override void CalculateLayoutInputHorizontal()
7.     {
8.         base.CalculateLayoutInputHorizontal();
9.         rectTransform.sizeDelta = new Vector2(minWidth, rectTransform.sizeDelta.y);
10.     }
11. }

 

Hi,

Try the following GameObject structure inside a Canvas (Components between parentheses) :

ScrollView (Scroll Rect, Image, Mask)

Content (VerticalLayoutGroup or HorizontalLayourGroup, Content Size Filter)

Cell (Image, Layout Element)
​

The key components are:

Content Size Filter: expands the height/width of the content game object based on the amount of cells
Layout Element: sets the min and preferred size of the cell

Best

 

Thanks for that. I must have missed that one

 

Hm... weird thing is that it doesn't resize properly. I am having only one horizontal group, and I am adding elements to it. When they become too big, I want the container to resize to envelop the buttons.

What I am doing now:

EDIT: I have fixed it by adding the "Content size fitter" and enabling it when the container becomes too small.

 

for anybody new trying to figure out the solution.
GridLayotGroup ( -> constraints : Fixed Column count ) ,
And A Content Size Fitter ( -> vertical fit : Preffered Size )
makes the magic

 

You saved my life. Thanks a lot!