[TIMOB-15349] Alloy: label height decreases

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Duplicate
Resolution Date	2013-09-27T13:21:54.000+0000
Affected Version/s	Release 3.1.3
Fix Version/s	n/a
Components	iOS
Labels	height, iOS7, label, triage
Reporter	Meenakshi Pathak
Assignee	Tony Lukasavage
Created	2013-09-26T12:33:31.000+0000
Updated	2017-03-22T22:25:21.000+0000

Description

Vertical label height decreases in iOS 7 specifically in alloy. *Steps to Reproduce* : 1. Copy and paste the below code in newly created alloy project. index.xml:

<Alloy>
	<Window class="container" layout="vertical">
		<Label id="countdownMainValue" borderColor="red">00</Label>
		<Label id="countdownMainLabel">Days</Label>
	</Window>
</Alloy>

index.tss:

"container" : {
    layout: "vertical",
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE
},

"#countdownMainValue" : {
    height: Ti.UI.SIZE, 
    top: 0,
    font: {
        fontFamily: "ProximaNovaSoft-Regular",
        fontSize:"150dp"
    },
    color: "#119ca6",
 },
"#countdownMainLabel[platform=ios]" : {
    font: {
        fontFamily: "ProximaNovaSoft-Regular",
        fontSize:"24dp"
    },
    color: "#119ca6",
    top: "-50dp",
}

2. Run on iOS 6 and iOS 7 device and see the difference. *Note:* This behavior is not shown in Classic Titanium. Please find attachments of iOS 6 and iOS 7.

Attachments

File	Date	Size
iOS 6.PNG	2013-09-26T12:33:31.000+0000	26743
iOS 7.png	2013-09-26T12:33:31.000+0000	25910

Comments

Tony Lukasavage 2013-09-26

[~mpathak] can you include the traditional titanium code you used to compare? It seems pretty unlikely that this is an Alloy issue, but the code you used to assert this would make it much easier to identify. It also looks like, based on your screenshots, that you used 2 different ios sims to generate your screenshots. This would account for the difference in formatting. It's possible you used different sims for your traditional vs. alloy approach. Be sure to use the same sim for all tests.

Tony Lukasavage 2013-09-26

[~mpathak] you have a typo in your alloy code. Your style key should be .container, not container, in the index.tss. You're missing the dot, which signifies class. This causes the window to not get the appropriate properties, which in turn accounts for the disparity between your alloy and traditional code. When you fix that, the Alloy and traditional version look exactly the same, as in your 2nd screenshot. The formatting difference is a result of the changes in size and formatting imposed by Apple with iOS 7, not Titanium. As with all other iOS developers (not just Titanium ones), you'll unfortunately need to account for these formatting changes in your app. For reference, here's the working Alloy and traditional versions

traditional

app.js

   var win = Ti.UI.createWindow({
   	layout: "vertical",
     width: Ti.UI.FILL,
     height: Ti.UI.SIZE
   });
   
   var mainValue = Ti.UI.createLabel({
   	text: '00',
   	borderColor: 'red',
   	height: Ti.UI.SIZE,
     top: 0,
     font: {
       fontFamily: "ProximaNovaSoft-Regular",
       fontSize:"150dp"
     },
     color: "#119ca6"
   });
   
   var mainLabel = Ti.UI.createLabel({
   	text: 'Days',
   	font: {
       fontFamily: "ProximaNovaSoft-Regular",
       fontSize:"24dp"
     },
     color: "#119ca6",
     top: "-50dp"
   });
   
   win.add(mainValue);
   win.add(mainLabel);
   
   win.open();

alloy

Unchanged from your version, other than fixing your typo.

index.xml

   <Alloy>
       <Window class="container" layout="vertical">
           <Label id="countdownMainValue" borderColor="red">00</Label>
           <Label id="countdownMainLabel">Days</Label>
       </Window>
   </Alloy>

index.tss

   ".container" : {
       layout: "vertical",
       width: Ti.UI.FILL,
       height: Ti.UI.SIZE
   },
   
   "#countdownMainValue" : {
       height: Ti.UI.SIZE,
       top: 0,
       font: {
           fontFamily: "ProximaNovaSoft-Regular",
           fontSize:"150dp"
       },
       color: "#119ca6",
    },
   "#countdownMainLabel[platform=ios]" : {
       font: {
           fontFamily: "ProximaNovaSoft-Regular",
           fontSize:"24dp"
       },
       color: "#119ca6",
       top: "-50dp",
   }

index.js

   $.index.open();

James Semple 2013-09-27

Tony, to clarify here the issue is that the same Titanium label code behaves differently from iOS6 to iOS7. The difference is in the placement of the word 'Days' and we believe it is related to using a negative top value. I also do not believe this is related to Alloy however we need to push for this change in behaviour to at least be confirmed by Appcelerator.
Ingo Muschenetz 2013-09-27

Marking as duplicate of linked issue.
Lee Morris 2017-03-22

Closing ticket as duplicate and links to the related ticket have been provided above.

JSON Source