- Home /
The question is answered, right answer was accepted
[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.
Answer by aadityakirans · Jul 22, 2020 at 05:22 AM
Hey so a friend of mine called Gopee helped me solve this issue for the timeline. Here are the 3 things that he did to fix the issue.
1) Added a layout element to the UI prefab that was being instantiated and checked proffered height on it.
2) Changed the vertical layout group parameters on the Content in which all these prefabs are instantiated. Currently the parameters that are checked on the Vertical Layout group are control child size ticked on width and child force expand ticked on width.
3) But doing all this was somehow weirdly affecting the scale of the prefabs instantiated. So, in the code where the prefab was instantiated, the following lines were added.
RectTransform rect = element.transform as RectTransform;
rect.localScale = Vector3.one;
Answer by ranch000 · Jul 07, 2020 at 08:42 AM
In your vertical Layout group, See that The following properties are checked:
Child Control Size : Width
Child Force Expand : Width Height
Also ensure if the scroll view itself is anchored and has no fixed width and height
Thank you sir but as you have said, the Scroll view I've already anchored. Please see the image below. Is this a Unity Bug I wonder???
Follow this Question
Related Questions
how do i link menu options to a button? 0 Answers
I need help with prefabs 1 Answer
How to make a crouch button for mobile? 2 Answers
Injecting data into Prefabs 1 Answer