[TIMOB-19525] iOS: ListView/TableView in a container with "vertical" layout is cut off

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Invalid
Resolution Date	2016-10-19T15:42:20.000+0000
Affected Version/s	Release 4.1.1
Fix Version/s	n/a
Components	iOS
Labels	TCSupportTriage, ios, listview, tableview, vertical_layout
Reporter	Mark Mokryn
Assignee	Eric Merriman
Created	2014-09-08T18:50:54.000+0000
Updated	2017-03-24T18:03:12.000+0000

Description

Run the code below. You will see the ListView and TableView get cut short by exactly the offset in the vertical layout (e.g. if the ListView is specified with top:20 then 20 points will be cut off at its bottom).

var win1 = Ti.UI.createWindow({
    backgroundColor : 'white',
    layout: 'vertical' // causes the bug
});

var label1 = Ti.UI.createLabel({top: 0, text: 'Do you see 20 tableview rows?', font: {fontSize: '16dp'}, height: 50, color: 'black'});
win1.add(label1);
var tableData = [];
for (var i = 1; i <= 20; i++) {
	tableData.push({title: 'table row' + i});
}

// The tableview will be cut at the bottom by 100 points
var table = Ti.UI.createTableView({ data: tableData, top: 100});
win1.add(table);


var win2 = Ti.UI.createWindow({
    backgroundColor : 'white',
    layout: 'vertical' // causes the bug
});
var label2 = Ti.UI.createLabel({top: 0, text: 'Do you see 20 listview rows?', font: {fontSize: '16dp'}, height: 50, color: 'black'});
win2.add(label2);
// the listview will be cut by 100 points
var listView = Ti.UI.createListView({top: '100dp'});
var section = Ti.UI.createListSection(); 
var sections = [];
var data = [];

for (var i = 1; i <= 20; i++) {
	data.push({properties : {title : 'listview row ' + i}});
}
section.setItems(data);
sections.push(section);
listView.sections = sections;

win2.add(listView);

var win3 = Ti.UI.createWindow({
    backgroundColor : 'white',
    layout: 'absolute' // OK
});

var label3 = Ti.UI.createLabel({top: 0, text: 'Absolute layout so we see 20 rows', font: {fontSize: '16dp'}, height: 50, color: 'black'});
win3.add(label3);
var tableData3 = [];
for (var i = 1; i <= 20; i++) {
	tableData3.push({title: 'table row' + i});
}
// since in absolute layout, this tableview will look OK
var table3 = Ti.UI.createTableView({ data: tableData3, top: 100});
win3.add(table3);

var tab1 = Ti.UI.createTab({title: 'BUG1', window: win1});
var tab2 = Ti.UI.createTab({title: 'BUG2', window: win2});
var tab3 = Ti.UI.createTab({title: 'OK', window: win3});
var tabgroup = Ti.UI.createTabGroup({tabs: [tab1, tab2, tab3]});
tabgroup.open();

Comments

Mark Mokryn 2015-01-19

This bug still exists in 3.5.0.GA

Hans Knöchel 2016-10-19

The Ti.UI.ListView needs a bottom property to correctly range the bottom spacing. So this will work:

   var win1 = Ti.UI.createWindow({
       backgroundColor : 'white',
       layout: 'vertical' // causes the bug
   });
    
   var tableData = [];
   for (var i = 1; i <= 20; i++) {
   	tableData.push({title: 'table row' + i});
   }
    
   // The tableview will be cut at the bottom by 100 points
   var table = Ti.UI.createTableView({ data: tableData, top: 100, bottom: 0});
   win1.add(table);
   
   win1.open();

Lee Morris 2017-03-24

Closing ticket as invalid with reference to the above comments.

JSON Source