Titanium JIRA Archive
Appcelerator Community (AC)

[AC-1016] ListView randomly shows blank rows on section.setItems()

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionNeeds more info
Resolution Date2015-09-17T07:59:32.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAlloy, Titanium SDK & CLI
LabelsTCSupportTriage, blank_rows, custom_template, listsection, listview, template, titanium
ReporterPatrick van Vuuren
AssigneeShak Hossain
Created2014-09-25T13:53:38.000+0000
Updated2016-03-08T07:37:21.000+0000

Description

Hello. I have a ListView with custom ListItems. For this I use the templates as specified in the docs. When I add my custom rows to the listsection present in the listview, the listview sometimes shows blank rows instead of my own rows. The following test causes this. I added a refreshcontrol to show what happens when refreshing. Sometimes when you refresh and do setItems again, the list is fine.

index.xml:

<Alloy>
	<Window class="container">
	    <ListView defaultItemTemplate="default" top="20">
	        <RefreshControl id="refreshControl" tintColor="#000" onRefreshstart="refreshList" /> 
	        <Templates>
                <ItemTemplate name="default" height="Ti.UI.SIZE" backgroundColor="#2000">
                    <View class="cell" left="2.5%">
                        <Label text="Today, 15:45" />
                        <ImageView image="appicon.png" />
                        <Label text="Title" />
                    </View>
                    <View class="cell" right="2.5%">
                        <Label text="Today, 15:45" />
                        <ImageView image="appicon.png" />
                        <Label text="Title" />
                    </View>
                </ItemTemplate>
            </Templates>
            <ListSection id="listSection" />
	    </ListView>
	</Window>
</Alloy>

index.tss:

"ListView":{
	layout: 			'vertical',
	scrollType: 		'vertical',
	width: 				'100%',
	height: 			Ti.UI.FILL,
	contentHeight: 		Ti.UI.SIZE,
	contentWidth: 		"100%",
	horizontalWrap: 	false,

},
"ListView[platform=ios]":{
	separatorStyle:		Ti.UI.iPhone.ListViewSeparatorStyle.NONE,
	separatorColor:		"#000"
}
".cell":{
	width: "47.5%",
	height: Ti.UI.SIZE,
	layout: 'vertical',
	top: 5
},
"Label":{
	font: {
		fontSize: 11,
	},
	width: "90%",
	textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
	color: "#646464",
}

index.js:

function refreshList() {
    var items = [];
    for(var i = 0; i < 15; i++) {
        var item = {};
        items.push(item);
    }
    $.listSection.setItems(items);
    $.refreshControl.endRefreshing();
}

refreshList();
$.index.open();
The blank rows dont really have a pattern where they exactly appear. Also sometimes when you scroll they dissappear or appear on random places when a blank row was already present. Regards, Patrick van Vuuren

Comments

  1. Patrick van Vuuren 2014-10-07

    This issue still persists in iOS 8 / Ti SDK 3.4.0 / Alloy 1.5.0. Is it possible this issue could be looked at? The rows are actually there but not visible. It's not like there is actually no row. I also made a video ([https://vimeo.com/105630553]) for my application to see whats happening.
  2. Patrick van Vuuren 2014-10-21

    Is anyone looking at this? It is a serious issue in my iOS application that is already live.
  3. Fokke Zandbergen 2014-11-22

    I have this issue as well and it disappears when I remove: 
       separatorStyle: Ti.UI.iPhone.ListViewSeparatorStyle.NONE
    It only reproduces on devices, about 8 out of 10 times. [~mpmiranda] [~ingo] could you have a look at this? The workaround is to not use separatorColor instead and set it to the backgroundColor of the list items. This issue seems to be the same as TC-4126
  4. Patrick van Vuuren 2014-11-22

    Hello Fokke, Thanks for finding out the problem. If I define the backgroundColor to white and leave the seperatorStyle/seperatorColor black it is fixed? Regards, Patrick
  5. Fokke Zandbergen 2014-11-23

    [~Serfenia] just don't use seperatorStyle and instead use seperatorColor to hide the line by giving it the same color as the ListItem's backgroundColor or transparent.
  6. Patrick van Vuuren 2014-11-25

    Thanks Fokke Zandbergen, I can verify that works as a solution. Ti SDK 3.4.1 Alloy 1.5.1 iOS 8.1
  7. Tim Poulsen 2015-02-11

    .
  8. Sebastian Klaus 2015-02-23

    I can confirm, that in 3.5.0 the problem exists. here's a screenshot: http://cl.ly/image/0w2B3v1z3S0A
  9. Tim Poulsen 2015-02-23

    I am unable to reproduce this problem using the test app included in the description on this ticket. I also cannot reproduce the issue on the linked ticket. Tested with TiSDK 3.5.0.GA and 4.0.0 (master build) Alloy 1.5.1, 1.6.0-dev, and 1.7.0-dev iOS 8.1 simulator Two different Macs (core i7 w/16g and core i5 w/8g)
  10. Sebastian Klaus 2015-03-25

    It's reproducible with childTemplates mixed horizontal and vertical layouts
  11. Radamantis Torres-Lechuga 2015-03-25

    [~benutzername] can you please add a test case?
  12. Sebastian Klaus 2015-03-25

    Sorry, I deleted all my work with specific layouts and refactored it. I will have a look if I can create a simple one
  13. Claus Stilborg 2015-08-23

    I see the same behaviour on 4.1, it seems to be random

JSON Source