[SOLVED] UI issue when instantiating UI prefabs at runtime.

Hello, I had been working on this mobile app that was primarily UI based. There was this timeline and gallery module inside it. To make the modules extensible and modular, I tried to set everything up so that the UI elements are all spawned at runtime, this way, I thought that to change anything later on, all I needed to do was to tweak some values in the inspector.

But what happened was that on spawning the prefabs, in lower resolutions, the UI was fine but at higher resolutions, the UI seemed to overflow to the right of the screen as shown in the images below.

The code that I use to spawn the prefabs on screen is as follows:

void SpawnTimelineElement() { for (int i = 0; i < spawnCount; i++) { GameObject element = Instantiate(timelineElementPrefab) as GameObject; element.transform.SetParent(contentScreen.transform, false); element.GetComponent<TimelineElement>().PopulateElement(timelineData.dataList[i]); } }

This function is called in void Start();. The timeline in this case is inside a Scroll view and the content size fitter has horizontal fit: min size and vertical fit: proffered size. Vertical layout group has the padding and spacing 0, child alignment to the upper left, use child scale ticked on width and height and child force expanded only ticked on width.

I managed to get this thing to work on all resolutions when I placed all the objects in the scene instead of spawning them on start but that really isn't an ideal solution.

Earlier I didn't use false along with the set parent method in the code above. Because of this the UI used to break in unpredictable ways, I saw this in some forum and I used it but still, things aren't perfect. Any help is greatly appreciated and thanks in advance.