[AC-1544] iOS: View layout and height doesn't work correctly in ListView

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Fixed
Resolution Date	2014-10-28T08:26:27.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Alloy
Labels	TCSupportTriage, alloy, ios, listview
Reporter	Handinata Tanudjaja
Assignee	Mauro Parra-Miranda
Created	2014-08-09T20:04:14.000+0000
Updated	2016-03-08T07:38:00.000+0000

Description

Problem Description

View layout doesn't work and height doesn't work correctly in ListView. This is only happening in iOS. See attached index.xml for sample code.

Steps to reproduce

1. Create a new mobile project (Classic titanium) 2. Add this code to app.js:

var win = Ti.UI.createWindow({backgroundColor: 'white'});
var template = {
     
    properties: {
    height: "80dp"
    },
    childTemplates: [
       {
            type: 'Ti.UI.View',
            bindId: 'article',
            id: 'article',
            properties: {
            layout: 'vertical',
            backgroundColor: "#EEE"
            },
             
            childTemplates: [
                    {
                        type: 'Ti.UI.Label',
                        bindId: 'articleTitle',
                        id: 'articleTitle',
                        properties: {
                        text: "Cars exploding in drag races look like they are made out of Jell-O",
                        wordWrap: true,
                        },
             
                   },
                   {
                        type: 'Ti.UI.Label',
                        bindId: 'Title',
                        id: 'Title',
                        properties: {
                        text: "Gizmodo",
                        },
             
                   },
             ]
              
       },
    ]
             
};      
 
 
 
var listView = Ti.UI.createListView({
    templates: { 'template': template }, 
    defaultItemTemplate: 'template',
    separatorColor: "#000000"
     
});
 
 
 
var sections = [];
 
 
var listSection = Ti.UI.createListSection({
    id: 'myListSection'
});
 
var listDataSet = [
 
    { article: 'article' },
    { article: 'article' },
    { article: 'article' },
    { article: 'article' },
    { article: 'article' },
    { article: 'article' },
    { article: 'article' },
     
 
];
listSection.setItems(listDataSet);
sections.push(listSection);
 
listView.setSections(sections);
win.add(listView);
win.open();

4. Run it in device.

Attachments

File	Date	Size
index.js	2014-08-10T05:28:40.000+0000	221
index.xml	2014-08-09T20:06:13.000+0000	581
Screen Shot 2014-08-09 at 3.05.00 PM.png	2014-08-09T20:06:13.000+0000	47644

Comments

François Mériaux 2014-08-11

The height you set for each row ('150dp') is too small to contain the two labels. Set the height of both the view and the template to Ti.UI.SIZE to have the expected behavior.

   <Alloy>
   	<Window class="container">
   		<ListView defaultItemTemplate="template" id="myListView" separatorColor="#000000">
   			<Templates>
   				<ItemTemplate name="template" height="Ti.UI.SIZE">
   					<View layout="vertical" height="Ti.UI.SIZE">
                       		<Label text="Cars exploding in drag races look like they are made out of Jell-O" id="articleTitle" 
                       			wordWrap="true"/>
                       		<Label text="Gizmodo"/>
                       </View>
   				</ItemTemplate>
   			</Templates>
   			<ListSection id="myListSection">
   				
   			</ListSection>
   		</ListView>
   	</Window>
   </Alloy>

Mauro Parra-Miranda 2014-08-11

Hello [~handitan]! Can you please take a look to the [~FrancoisM] suggestion? Thanks!
Handinata Tanudjaja 2014-08-11

Francois, thank you for your suggestion. I didn't realize that I could set the height for ItemTemplate hmm... I am trying it with fixed height number and it also works well now. Thank you! Thank you Mauro for the follow up.
Handinata Tanudjaja 2014-08-11

François Mériaux : Actually, I think I might spoke too soon. Is setting the height in itemTemplate the correct way? I don't think I see it in the documentation. Because itemTemplate without height being defined works well with Android but not in iOS.
François Mériaux 2014-08-11
Handinata Tanudjaja 2014-08-11

Ah ok, thanks Francois. So... I guess setting the height in itemTemplate is a must to get it working. It's just misleading to have without-height-itemTemplate works on Android but doesn't work on iOS. Oh well...

JSON Source