How to stretch an UI element witch is a child of a layout group whose has a content size fitter

Unity Engine
,
1

Hi,

My final goal is to use a horizontal scroll view, with its content having an horizontal layout group and it’s size driven by a content size fitter to grow along all its children size (width) + When resizing my Main Panel I want my swipable (in the scroll view) content’s children (Panels actually) to stretch along so one children fill all my screen width no matter what it is.

I make this simple UI hierarchy as an example :
Main Panel
–Content Panel (Horizontal Layout Group[Child Control Size : width:V, height:V], content size fitter[horizontal: preferred size])
----Image(Layout element(Flexible width:1)
---- …
---- (duplicate)Image(Layout element(Flexible width:1)

I want my panel content size (width) to fit along with all its child Image size (width), so I’m using a content size fitter with horizontal set to preferred size. So when I duplicate my Image my Content Panel width grow.
+
I want My Images to stretch along my Main Panel. So if i increase Main Panel width, I want all my Images width to grow along, and as consequence my Content Panel width grow too along the sum of all images width.

Tried different setting (Child force expand, flexible width:0 + fixed width, trying to setting rectTransform anchor preset to stretch for all my elements, …) But I cannot achieve both feature.

2

I solved this by script, but I don’t really like the solution, I hoped there was a built in unity feature to do this :

On my Main Panel, I add this script :

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class UpdateChildsPreferredWidth : UIBehaviour {

    public GameObject content;

    // Use this for initialization
    protected override void Start () {
        base.Start();
        RectTransform rtr = transform as RectTransform;
        foreach (Transform child in content.transform)
        {
            child.GetComponent<LayoutElement>().preferredWidth = rtr.rect.width;
        }
    }

    protected override void OnRectTransformDimensionsChange()
    {
        Debug.Log("OnRectTransformDimensionsChange FIRED !!!");
        base.OnRectTransformDimensionsChange();
        RectTransform rtr = transform as RectTransform;
        foreach (Transform child in content.transform)
        {
            child.GetComponent<LayoutElement>().preferredWidth = rtr.rect.width;
        }
    }

    // Update is called once per frame
    void Update () {
       
    }
}