Problem
Currently, when an index is present as the right sidebar on iOS, the row contents are sized to respect it and the header/footer views are not. The "correct" behavior is apparently to resize contents, based on the behavior of the row contents view as flexible sized. Changing behavior of row sizing may be perceived as a regression, or should be a configurable property (new property, possibly a separate feature request.)
Test
----
var win = Ti.UI.createWindow();
win.open();
var header = Ti.UI.createView({
height:Ti.UI.SIZE,
backgroundColor:'green'
});
header.add(Ti.UI.createLabel({
text:"Fold Goggold Jeff Goldgate Jeff Jeffgold Foldgold Blumgold Cool Jeffjeff Gatecool Game Coolcold Blum Gateblum Coolgold Goldjeff Game Gamegame Gate Oldgold Jeff Goldblast Jeff Gotgamesgold. Cool cool cool game.",
top:0,
height:Ti.UI.SIZE
}));
var footer = Ti.UI.createView({
height:Ti.UI.SIZE,
backgroundColor:'red'
});
footer.add(Ti.UI.createLabel({
text:"Gold Blumblum Gamegold Jeff Goldgame Gold Coolgold Jeffgame Coolgame Game Jeffgate Blum Gamegate Gatefold Done Gonegame Game Goldblast Gold Blum Coldgold Goldgame Old Gatefold Blastgame Foldgame.",
top:0,
height:Ti.UI.SIZE
}));
var row1 = Ti.UI.createTableViewRow({
// height:'auto',
height:Ti.UI.SIZE
});
var label1 = Ti.UI.createLabel({
// height:'auto',
top:0,
height:Ti.UI.SIZE,
text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
});
row1.add(label1);
var row2 = Ti.UI.createTableViewRow({
// height:'auto',
height:Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
// height:'auto',
height:Ti.UI.SIZE,
top:0,
text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
});
row2.add(label2);
var table = Ti.UI.createTableView({
index:[{index:0,title:'a'},{index:1,title:'b'}],
data:[row1,row2],
headerView:header,
footerView:footer
});
win.add(table);
----
Expected
* Header, footer, and rows all have the same width
Actual
* Header and footer span the whole row (320 dip) and rows span width only up until the left margin of the index (~270 dip)
Screenshot from Apple's own Contacts app
I'm not sure if this is a valid issue. Consider the purpose of the headers and footers versus row contents: The former includes graphics and styles that help frame the table view, the latter is only conveying data; the row itself is full-width. I've included a screenshot from Apple's own Contacts app as a demonstration. The index is on the side, and the long C name honors the index by truncating early. However, the table's own header, the headers of the sections, and the row dividers themselves (See the t section) are fully the width of the screen. Proposing we mark this invalid.
It looks like it is actually an HIG violation to extend row content underneath the index. bq. If you include an index, avoid using table-view elements that display on the right edge of the table (such as the disclosure indicator), because these elements interfere with the index. Closing this ticket as INVALID.
HIG violation.