Dynamic elements within a scrollview

Hello, everyone.

I need help, I´m going crazy with this.

I'm trying to create an interface similar to whatsapp (bubbles on each side with text inside). For this, I have decided to do it in the following way:

1. I have created an scrollview, with its Viewport and content gameobjects.

2. For bubbles, I have created an Image with Vertical Layout Group and Content Size Fitter components. Inside this Image, I have created a Text gameobject. This way, bubbles grow when the text grows. This works great.

3. After, I have converted the bubble image in a prefab.

4. In code, I attach this prefab to the Content gameoject (inside Scrollview) all the times I need:

Code (CSharp):

1. GameObject newGO;
2.  
3. newGO = (GameObject)Instantiate( bubblePlayerPrefab , Content);
4. newGO.transform.GetChild(0).GetComponent<Text>().text = "My random text";

My problem is that I have not been able to get the bubbles appear in a visible area of the Scrollview, and not that each bubble appears below the others. I tried to get information from the gamobject Content, such as its position, width, height ... but I can not get it.

I have managed to put a item where I want, but I need to make calculations to dynamically put each phrase that comes from the database.

Code (CSharp):

1. newGO.GetComponent<RectTransform>().anchoredPosition = new Vector2(-434.3f,-33.4f);

I have used the rect.width, the sizeDelta.x, the wideredPosition ... But I can not control where the bubbles appear in Scrollview. Any suggestions? I'm going crazy with this topic.

Thanks a lot for your help.

 

Try changing the pivot of the Viewport and the Content to Y=1. Not sure if both are necessary, but that is my setup in a similar layout. Maybe you have to play around with the child alignment in the Layout Group (I have it at Upper Left).

If you still don't see your items, select one in the hierarchy, then go with your mouse over the scene view and press F. that focuses the selected object and you can see if it is outside the screen or maybe has a width / height of zero.