Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14543] iOS: Setting ListView height as Ti.UI.SIZE makes ListView disappear

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2014-08-06T18:20:28.000+0000
Affected Version/sRelease 3.1.1, Release 3.2.0
Fix Version/sRelease 3.4.0
ComponentsiOS
LabelsiOS, module_listview, parity, qe-manualtest, usability
ReporterMark Mokryn
AssigneeVishal Duggal
Created2013-07-12T11:55:07.000+0000
Updated2014-09-09T09:32:44.000+0000

Description

*Problem* In my attempt to get rid of separators for non-full ListViews I tried using Ti.UI.SIZE for the height. This works on Android as far as I can tell, but on iOS the ListView disappears. *Test case*
var win = Ti.UI.createWindow({
	backgroundColor : 'white'
});
var listView = Ti.UI.createListView({
	top : 0,
	height : Ti.UI.SIZE //where is my listview??!?!?!?
});

var section = Ti.UI.createListSection({
	headerTitle : 'ugly lines'
});
section.setItems([{
	properties : {
		title : 'Ugly lines on iOS'
	}
}]);

listView.sections = [section];

win.add(listView);
win.open();

Comments

  1. Daniel Sefton 2013-07-12

    Tested and confirmed on iOS 6 simulator with Ti SDK 3.1.1 GA and 3.2 CI.
  2. Timan Rebel 2013-11-04

    Tested and confirmed on iOS 7.0.3 with Ti SDK 3.2.0.v20131010124846
  3. Paul Hamilton 2014-01-15

    Same for me, works great on android but on iOS it disapears. Trying to hide the rows/separators if they aren't needed based on dynamic data. No known workarounds. With all the work with listviews recently, hopefully this takes priority and get it polished up! Any eta on this?
  4. Kanmani Raja 2014-06-25

    Same for me, however the workaround to hide the empty rows is to set the footerTitle property to empty string. i.e., footerTitle: ""
  5. Fokke Zandbergen 2014-07-01

    Still an issue in 3.3.0.RC - Really frustrating I can't make a ListView size to its (non-scrollable) contents.
  6. Ingo Muschenetz 2014-07-07

    Can someone provide a use case for this? We will attempt to find a solution.
  7. Fokke Zandbergen 2014-07-08

    [~ingo] You mean a *why*? Some examples: * Using a non-scrollable ListView in a vertical layout * Using a ListView in a Popover My main use case is the second one. I have a settings popover with a navigation window and a list view in the root window. A click on a row then opens a child window with another list view. The popover should take the size of the list, which is set to non-scrollable. But then it disappears :)
  8. Timan Rebel 2014-07-08

    For me it is mostly Fokke's #1. So I can reuse templates through out my app and to be able to put a ListView in a ScrollView. For example: I have a Video screen with a WebView playing a YouTube video. An Ad via a Native Module, 3 comments and 3 related video's. Because of the Native Module (not possible) and WebView (missing EventListeners) I can not use the ListView for the whole screen. So I use a ScrollView and 2 ListViews for the 3 comments and 3 related video's. That way I can still reuse my templates for related video's and comments
  9. Vishal Duggal 2014-08-04

    Test Case
       
       var hasHeader=false
       var hasFooter=false
       
       var container = Ti.UI.createView({backgroundColor:'white',top:0,height:40});
       var b1 = Ti.UI.createButton({title:'Header',top:0,left:0});
       var b2 = Ti.UI.createButton({title:'Footer',top:0,right:0});
       var b3 = Ti.UI.createButton({title:'Style',top:0})
       container.add(b1);
       container.add(b2);
       container.add(b3);
       
       
       var dummyTexts = [
           '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.',
           'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
       ]
       
       var tCount = 0;
       
       var plain = true; 
       var win = Ti.UI.createWindow({backgroundColor:'blue',orientationModes:[1,2,3,4],fullscreen:true});
       var listView = null;
       
       function doAction(e)
       {
           if (e.bindId == 'actionbtn') {
               var sInd = e.sectionIndex;
               var iInd = e.itemIndex;
               if (sInd == 0) {
                   if (iInd == 0) {
                       var s = Ti.UI.createListSection({headerTitle:'A New Section'});
                       var items = [{info:{text:dummyTexts[tCount]}},{info:{text:'Delete Section'}}]
                       tCount = tCount + 1;
                       tCount = tCount % 3;
                       s.setItems(items);
                       listView.appendSection(s);
                   } else if (iInd == 1) {
                       var s = listView.sections[0];
                       var item = [{info:{text:'Delete Row'}}]
                       s.appendItems(item);
                   } else {
                       var s = listView.sections[0];
                       s.deleteItemsAt(iInd,1);
                   }
               } else {
                   listView.deleteSectionAt(sInd);
               }
           }
       }
       
       
       function genDefaultSection()
       {
           var section = Ti.UI.createListSection({headerTitle:'Section Title'});
           var items = [
               {info:{text:'Append Section'}},
               {info:{text:'Append Row'}}
           ]
           section.setItems(items);
           return section;
       }
       
       var myTemplate = {
           properties:{height:Ti.UI.SIZE},
           childTemplates: [
               {   type: 'Ti.UI.Label',
                   bindId: 'info',
                   properties: {color:'black',left:'10dp', top:'5dp', width:'80%'}
               },
               {   type: 'Ti.UI.Button',
                   bindId: 'actionbtn',
                   properties: {color: 'blue',right: '0dp',title:'GO'}
               }
           ],
           events: {click: doAction}
       };
       
       function genListView(style) 
       {
           hasHeader=false
           hasFooter=false
           b1.color = 'red';
           b2.color = 'red';
       
           var listView = Ti.UI.createListView({templates: { 'template': myTemplate },defaultItemTemplate: 'template',left:'10dp',right:'10dp',top:40,style:style,height:Ti.UI.SIZE});
           listView.sections = [genDefaultSection()];
           return listView;
       }
       
       
       b1.addEventListener('click',function(e){
           if(hasHeader == true) {
               listView.headerView = null;
               b1.color = 'red';
           } else {
               var l = Ti.UI.createLabel({text:'I am header'});
               listView.headerView = l;
               b1.color = 'green';
           }
           hasHeader = !hasHeader;
       })
       
       b2.addEventListener('click',function(e){
           if(hasFooter == true) {
               listView.footerTitle = null;
               b2.color = 'red';
           } else {
               listView.footerTitle = 'I am a footer title';
               b2.color = 'green';
           }
           hasFooter = !hasFooter;
       })
       
       b3.addEventListener('click',function(e){
           win.remove(listView);
           listView = null;
       
           if (plain == true) {
               listView = genListView(1);
           } else {
               listView = genListView(0);
           }
           plain = !plain;
           win.add(listView);
       });
       
       win.add(container);
       listView = genListView(0);
       win.add(listView);
       
       win.open();
       
  10. Vishal Duggal 2014-08-04

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5947
  11. Olga Romero 2014-08-22

    Mac osx 1-.9.4 Maverics Appcelerator Studio, build: 3.4.0.201408201526 Titanium SDK, build: 3.4.0.v20140821144114 Node.JS Version: v0.10.28 NPM Path: /usr/local/bin/npm NPM Version: 1.4.23 acs@1.0.16 alloy@1.5.0-dev (git://github.com/appcelerator/alloy.git#b2e8f580d023e45c63072df924666e58193a8981) install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium@3.4.0-dev (git://github.com/appcelerator/titanium.git#9079326639c7f610dafee33dd16742de7d92d795) titanium-code-processor@1.1.1 Xcode6 Device: iPhone 5c iOS 7.1 Closing as fixed.
  12. Mark Mokryn 2014-09-09

JSON Source