Problem
In iOS, when setting the style of a table to grouped (iPhone) - the child object contents (tableviewrow and its children as well like images, views, etc) are not correctly bound by the table's borders. They flow beyond the table.
Sample Code
Below is sample code to reproduce the problem - the red box should be bound by the row it is in. Instead, it spills out.
var win = Ti.UI.createWindow({
backgroundColor: '#000', layout: 'vertical'
});
win.add(Ti.UI.createLabel({
text: 'Ti.UI.iPhone.TableViewStyle.GROUPED\nRow children extend past row borders:',
color: '#fff',
height: 'auto'
}));
var table = Ti.UI.createTableView({
height: 100,
style: Ti.UI.iPhone.TableViewStyle.GROUPED,
borderRadius: 10
});
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createView({
left: -5, opacity: 0.5,
size: { width: 50, height: 50 },
backgroundColor: 'red'
}));
table.appendRow(row);
win.add(table);
win.open();
Tested On
Titanium SDK version: 1.7.0 (04/05/11 10:30 731db9c...)
Associated Helpdesk Ticket
http://support-admin.appcelerator.com/display/APP-386446
This is how Grouped tables work in Apple's UITableView. Grouped tables are not clipped the same way as Plain tables. Your javascript explicitly set the table style to Grouped, and specified negative bounds for the row's embedded view.
Closed as invalid.