[TIMOB-17881] iOS: Tableview with sections will fail to fill properly the rows after rotating

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2015-02-25T20:18:06.000+0000
Affected Version/s	Release 3.4.0
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Mauro Parra-Miranda
Assignee	Scott Davenport
Created	2014-10-21T05:44:14.000+0000
Updated	2017-03-22T23:03:48.000+0000

Description

Problem Description

When you rotate a tableview that contains sections with views that do a 'FILL' for height, the refresh / redraw will leave a big white space (i.e., the row won't fill the space after rotation).

Steps to reproduce

1. Create a new mobile project (classic titanium) 2. Paste this to app.js:

var win = Ti.UI.createWindow({
    backgroundColor : 'white'
});

function doView(color) {
    var view = Titanium.UI.createView({
        backgroundColor : color,
    });
    view.width = 300;
    view.height = 400;
    Ti.Gesture.addEventListener('orientationchange', function() {
        view.width = Ti.Gesture.isPortrait() ? 300 : 400;
        view.height = Ti.Gesture.isPortrait() ? 400 : 300;
    });
    return view;
}

function baseView() {
    var view = Ti.UI.createView({
        width : '100%',
        left : 0,
        top : 0,
        backgroundColor : 'green',
        layout : 'horizontal',
        height : Ti.UI.SIZE
    });
    Ti.Gesture.addEventListener('orientationchange', function() {
        view.width = Titanium.Platform.displayCaps.platformWidth;
        view.left = 0;
        view.top = 0;
        view.height = Ti.UI.SIZE;
    });
    return view;
}

var base = baseView();
var pink = doView('pink');
var blue = doView('blue');
base.add(pink);
base.add(blue);

var tableSections = [];
for (var i = 0; i < 5; i++) {
    var row = Titanium.UI.createTableViewRow();
    var base = baseView();
    var pink = doView('pink');
    var blue = doView('blue');
    base.add(pink);
    base.add(blue);
    row.height = 'auto';
    row.add(base);
    
    var section = Titanium.UI.createTableViewSection();
    section.height = Ti.UI.SIZE;
    section.width = Ti.UI.FILL;
    section.setHeaderTitle('Title ' + i);
    section.add(row);
    tableSections.push(section);
}

var table = Ti.UI.createTableView({
    objName : 'table',
    height: Ti.UI.SIZE
});

table.setSections(tableSections);
win.add(table);
win.open();

3. Run it in ipad simulator or ipad device. 4. You will see that a big white section is added after rotating twice the device.

Comments

Chee Kiat Ng 2014-12-02

Initial testings indicated that this happens on iOS 7.1 simulator, but on iOS 8.1, the white space appears momentarily, if it's scrolled slightly it will disappear.

Vishal Duggal 2015-02-25

What you really want to do is refresh the whole tableView in a single call instead of updating view piecemeal. The TableView API is really not built for this. What the developer should do is use the ListView and manipulate the defaultItemTemplate property of the listView. Attaching sample below

   var win = Ti.UI.createWindow({backgroundColor:'white',fullscreen:true})
   
   var pTemplate = {
       properties:{height:400,backgroundColor:'green'},
       childTemplates: [
           {                            
               type: 'Ti.UI.View', 
               bindId: 'pinkView', 
               properties: {width: 300, left: 0,top:0,backgroundColor:'pink'}
           },
           {
               type: 'Ti.UI.View',
               bindId: 'blueView',
               properties: {width: 300, left: 300,top:0,backgroundColor:'blue'}
           }
       ]
   };
   
   var hTemplate = {
       properties:{height:300,backgroundColor:'green'},
       childTemplates: [
           {                            
               type: 'Ti.UI.View', 
               bindId: 'pinkView', 
               properties: {width: 400, left: 0,top:0,backgroundColor:'pink'}
           },
           {
               type: 'Ti.UI.View',
               bindId: 'blueView',
               properties: {width: 400, left: 400,top:0, backgroundColor:'blue'}
           }
       ]
   };
   
   
   var listSections = [];
   for (var i = 0; i < 5; i++) {
       var section = Ti.UI.createListSection({ headerTitle: 'Title '+i});
       section.setItems([{}]);
       listSections.push(section);
   }
   
   var listView = Ti.UI.createListView({
       templates: { 'pt': pTemplate, 'ht':hTemplate },
       sections:listSections
   });
   
   
   
   win.add(listView);
   
   
   function updateRows()
   {
       if(Ti.Gesture.isPortrait()){
           listView.defaultItemTemplate = 'pt';
       } else {
           listView.defaultItemTemplate = 'ht';
       }
   }
   
   updateRows();
   
   win.addEventListener('close',function(){
       Ti.Gesture.removeEventListener('orientationchange', updateRows);
   })
   win.addEventListener('open',function(){
       Ti.Gesture.addEventListener('orientationchange', updateRows);
   })
   
   win.open();

If you wish to do the same using TableViews you can try the code below. Note that there is a single event listener for orientationChange and all the work is done there.

   var win = Ti.UI.createWindow({backgroundColor : 'white', fullscreen:true});
    
   function doView(color) {
       var view = Titanium.UI.createView({
           backgroundColor : color,
           top:0,
       });
       return view;
   }
   
   var tableSections = [];
   for (var i = 0; i < 5; i++) {
       var row = Titanium.UI.createTableViewRow({backgroundColor:'green'});
       var pink = doView('pink');
       var blue = doView('blue');
       row.add(pink);
       row.add(blue);
       
       
       var section = Titanium.UI.createTableViewSection();
       section.setHeaderTitle('Title ' + i);
       section.add(row);
       tableSections.push(section);
   }
   
   function updateRows()
   {
       var isPortrait = Ti.Gesture.isPortrait();
       for(var index=0;index<tableSections.length;index++){
           var row = tableSections[index].rows[0];
           var vc = row.children;
           if (isPortrait) {
               row.height=400;
               for (var index2 = 0; index2 < vc.length; index2++) {
                   vc[index2].applyProperties({width:300,left:(index2*300)})
              }
           } else{
               row.height=300;
               for (var index2 = 0; index2 < vc.length; index2++) {
                   vc[index2].applyProperties({width:400,left:(index2*400)})
              }
           }
       }
   }
   
   var table = Ti.UI.createTableView({
       objName : 'table',
       data:tableSections
   });
   
   updateRows();
    
   win.add(table);
   
   win.addEventListener('close',function(){
       Ti.Gesture.removeEventListener('orientationchange', updateRows);
   })
   win.addEventListener('open',function(){
       Ti.Gesture.addEventListener('orientationchange', updateRows);
   })
   
   win.open();

Vishal Duggal 2015-02-25

Workaround in comments
Lee Morris 2017-03-22

Closing ticket as "Won't Fix".

JSON Source