I read through this tutorial Appcelerator: Using JSON to Build a Twitter Client and attempted to create my own simple application to interact with a Jetty server I setup running some Spring code. I basically call a get http request that gives me a bunch of contacts in JSON format. I then populate several rows with my JSON data and try to build a TableView.

All of that works, however, my tableView rows take up the whole screen. Each row is one screen. I can scroll up and down and see all my data, but I'm trying to figure out what's wrong in my styling that's making the cells use the whole screen. My CSS is not great, so any help is appreciated. Thanks!

Here's my js file that's loading the tableView:

// create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;

// Function loadContacts() 
function loadContacts() {

    // empty array "rowData" for table view cells
    var rowData = [];

    // create http client
    var loader = Titanium.Network.createHTTPClient();
    // set http request method and url
    loader.setRequestHeader("Accept", "application/json");
    loader.open("GET", "http://localhost:8080/contactsample/contacts");
    // run the function when the data is ready for us to process
    loader.onload = function(){

        Ti.API.debug("JSON Data: " + this.responseText);

        // evaluate json
        var contacts = JSON.parse(this.responseText);

        for(var i=0; i < contacts.length; i++) {

            var id = contacts[i].id;
            Ti.API.info("JSON Data, Row[" + i + "], ID: " + contacts[i].id);
            var name = contacts[i].name;
            Ti.API.info("JSON Data, Row[" + i + "], Name: " + contacts[i].name);
            var phone = contacts[i].phone;
            Ti.API.info("JSON Data, Row[" + i + "], Phone: " + contacts[i].phone);
            var address = contacts[i].address;
            Ti.API.info("JSON Data, Row[" + i + "], Address: " + contacts[i].address);

            // create row
            var row = Titanium.UI.createTableViewRow({ height:'auto' });

            // create row's view
            var contactView = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 });
            var nameLbl = Titanium.UI.createLabel({
                text:name,
                left:5,
                height:24,
                width:236,
                textAlign:'left',
                color:'#444444',
                font:{
                    fontFamily:'Trebuchet MS', fontSize:16, fontWeight:'bold'
                }
            });
            var phoneLbl = Titanium.UI.createLabel({
                text: phone,
                top:0,
                bottom:2,
                height:'auto',
                width:236,
                textAlign:'right',
                font:{ fontSize:14}
            });
            var addressLbl = Titanium.UI.createLabel({
                text: address,
                top:0,
                bottom:2,
                height:'auto',
                width:236,
                textAlign:'right',
                font:{ fontSize:14}
            });
            contactView.add(nameLbl);
            contactView.add(phoneLbl);
            contactView.add(addressLbl);

            row.add(contactView);
            row.className = "item" + i;

            rowData.push(row);
        }

        Ti.API.info("RowData: " + rowData);

        // create table view
        var tableView = Titanium.UI.createTableView( { data: rowData });
        win.add(tableView);
    };

    // send request
    loader.send();

}

// get contacts
loadContacts();

And here are some screens showing my problem. I tried playing with the top, bottom, right, left pixels a bit and didn't seem to be getting anywhere. All help is greatly appreciated. Thanks!