4.6 Beta uGUI: Putting UI elements in a ScrollRect via code

For reference:

ScrollView (Parent Object)
- Content (Child Object of ScrollView)
-- Server Button 1 (Child Object of Content Object)
-- Server Button 2 (Child Object of Content Object)
-- Server Button 3 (Child Object of Content Object)
...and so forth.

I’m trying to make a server list window, done code-wise by spawning a set number of buttons inside a ScrollRect. Here’s my snippet of code, that gets triggered when the server list is updated from the master server.

    // NOTE: uiSLButtonPrefab is a button that has been saved as a prefab with the correct settings.
    // uiServerListGO is the actual reference to the uiServerList scroll window, which is a child of the ScrollRect.
	// uiButtonSize is the size of the button (in this case, 30 pixels).
    
    void DrawServerList()
        {
            // Step 1: Purge all the things.
            if(!uiSLButtonPrefab) return;

            GameObject[] toPurge = GameObject.FindGameObjectsWithTag("SrvListEntry");
            for (int i = 0; i < toPurge.Length - 1; i++) Destroy(toPurge*.gameObject);*

// Step 2: For as many items we have, do the prefabs for them.

  •  	// Not actually the real deal, done for testing.*
    

for (int i = 0; i < 100; i++)
{
GameObject nButton = Instantiate(uiSLButtonPrefab) as GameObject;
nButton.transform.parent = uiServerListGO.transform;
nButton.transform.position = new Vector2(0, i * (uiButtonSize / 2)); // ← likely the issue but I could be wrong!
}

// Step 3, done here.
}
The code partially works. As a result, the buttons are spawned correctly and parented under the ScrollRect. However, they do not appear. Looking at the inspector reveals that they are being instantiated at something like -764 on the left and -414 on the vertical axis. When I drag these back into view, the editor shows the button with red lines through it, like it’s corrupt or something.
I’m not sure if I’m meant to be playing with the actual button’s transform position, since buttons actually use a RectTransform. Has anyone done code-based buttons using the new UI system, and if so, could they please assist?
Cheers.

Bunch of things to note

  • The red x simply means the rectTransform limits are not valid. This is typically when the top is lower then the bottom, or the right coordinate falls to the left of the left coordinate
  • The easiest way to position a UI element is to use the layout elements
  • You can also modify its position manually, check out anchorMax, anchorMin, offsetMax and offsetMin. Docs here. Let me know if you are interested in seeing example code.

I also have a couple of video tutorials that might help.