Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24753] iOS: View sizes are incorrect in 6.1.0.GA (regression)

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-06-09T14:49:45.000+0000
Affected Version/sRelease 6.1.0
Fix Version/sRelease 6.1.1
ComponentsiOS
Labelsios, layout, qe-6.1.1, regression
ReporterRodolfo Perottoni
AssigneeVijay Singh
Created2017-05-31T00:18:27.000+0000
Updated2017-06-12T13:52:34.000+0000

Description

After updating to 6.1.0.GA my apps are calculating percentages of views incorrectly. If I have a view with *horizontal* layout and I create a child *Label* with let's say *90%* of width, it will be wrapped to the next line and use way more than 90% of width. Example: *index.xml* 
<Alloy>
	<Window id="container" layout="vertical">
		<View id="row">
			<View id="vwCheck"></View>
			<View id="vwLabel">
				<Label id="lbl">This is a test label</Label>
			</View>
		</View>
	</Window>
</Alloy>
*index.tss* 
"#row": {
    top: '50%',
    borderWidth: 1,
    width: '95%',
    right: 0,
    height: 50,
    layout: "horizontal"
}

"#vwCheck": {
    borderWidth: 1,
    height: Ti.UI.FILL,
    width: 44
}

"#lbl": {
    width: '100%',
    borderWidth: 1,
    minimumFontSize: 16,
    left: 0,
    font: {
        fontSize: '20dp',
    }
}
Expected result (Works on 6.0.2.GA): !Screen Shot 2017-05-31 at 10.14.01 am.png|thumbnail! Actual result (On 6.1.0.GA): !Screen Shot 2017-05-31 at 10.15.42 am.png|thumbnail! Setting my label width to 87% produces (6.1.0.GA): !Screen Shot 2017-05-31 at 10.16.42 am.png|thumbnail! And setting the label width to 88% (6.1.0.GA): !Screen Shot 2017-05-31 at 10.16.52 am.png|thumbnail!

Attachments

FileDateSize
Bildschirmfoto 2017-05-31 um 13.59.48.png2017-05-31T12:00:16.000+0000318599
Screen Shot 2017-05-31 at 10.14.01 am.png2017-05-31T00:14:13.000+000010439
Screen Shot 2017-05-31 at 10.15.42 am.png2017-05-31T00:15:52.000+00002511
Screen Shot 2017-05-31 at 10.16.42 am.png2017-05-31T00:17:09.000+00009898
Screen Shot 2017-05-31 at 10.16.52 am.png2017-05-31T00:17:40.000+00002649

Comments

  1. Hans Knöchel 2017-05-31

    Might be caused by TIMOB-23391, so adding [~vijaysingh] to the flow.
  2. Hans Knöchel 2017-05-31

    It's confirmed that the linked ticket caused this regression, reassigning to [~vijaysingh]. More details on the issue: *Note 1*: The change in TIMOB-23391 was to replace boundingWidth with bounds.size.width. As seen in the latest attached screenshot, the boundingWidth is 260px (the width of the inner view where the label is placed), but bounds.size.width is 304px (the whole view width). It tried to apply this size to the whole sub-container, resulting in breaking the width-limits of the current line and moving the label to the next line. *Note 2*: If you let the label auto-size itself by removing the width: 100%, it works again, although it's obviously no proper solution, more a workaround. *Note 3*: If we replace bounds.size.width with boundingWidth in [this line](https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/TiViewProxy.m#L2723), the test-cases of both tickets work. But until we really understand why, this is no final solution. Test-Case: 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var row = Ti.UI.createView({
       top: '50%',
       borderWidth: 1,
       width: '95%',
       right: 0,
       height: 50,
       layout: "horizontal"
   });
    
   var vwCheck = Ti.UI.createView({
       borderWidth: 1,
       height: Ti.UI.FILL,
       width: 44
   });
   
   var vwLabel = Ti.UI.createView();
    
   var lbl = Ti.UI.createLabel({
       width: '100%',
       borderWidth: 1,
       minimumFontSize: 16,
   	text: 'This is a test label',
       left: 0,
       font: {
           fontSize: '20dp',
       }
   });
   
   vwLabel.add(lbl);
   row.add(vwCheck);
   row.add(vwLabel);
   win.add(row);
   
   win.open();
  3. Vijay Singh 2017-06-07

    In this change following fixes are done - 1. Reverted changes of TIMOB-23391 due to which issue has come (Changes made in TIViewProxy.m) 2. Fixed TIMOB-23391again (changed width calculation function of UILabel , as it was giving wrong width. This change is in TIUILabel.m). PR (master) - https://github.com/appcelerator/titanium_mobile/pull/9120 Backported PR (6_1_X) - https://github.com/appcelerator/titanium_mobile/pull/9121 TestCases - 1. As mentioned in this ticket 2. Test cases of TIMOB-23391 
       var stringArray = ["Gmail Account", "Yahoo Account", "Skype Account", "Linc Account", "Appcelerator Account", "Microsoft Account","Gmail Account", "Yahoo Account", "Skype Account", "Linc Account", "Appcelerator Account", "Microsoft Account"] ;
   var win = Ti.UI.createWindow({
       title : 'LabelTest',
       backgroundColor : '#fff'
   });
   
   var wrapperView = Titanium.UI.createView({
       height : Ti.UI.SIZE,
       width : "98%",
       layout : 'horizontal',
       backgroundColor:'red',
       //top : "0",
       horizontalWrap : true,
   });
   win.add(wrapperView);
   
   for ( i = 0; i < stringArray.length; i++) {
   
       var labelView = Titanium.UI.createView({
           width : Titanium.UI.SIZE,
           height : "22dp",
           borderRadius : "11dp",
           backgroundColor : "#0080B0",
           left : "6dp",
           bottom:"5dp"
       });
       var label = Titanium.UI.createLabel({
           text :  stringArray[i],
           textAlign : "left",
           height : "20dp",
           width : Titanium.UI.SIZE,
           wordWrap : false,
           ellipsize : false,
           font : {
               fontSize : "13dp"
           },
           color : "#FFF",
       });
       labelView.add(label);
       wrapperView.add(labelView);
   }
   win.open();
    3. Run other layout test cases which have TIUILabel objects.
  4. Harry Bryant 2017-06-12

    Verified as fixed, view sizes are now calculated correctly when using percentages. Additionally, performed tests related to the following parameters: - horizontal / vertical layout - auto-width (FILL and SIZE) / percentages / static values - label container that size different than the children / label - left / right usages - Portrait / Landscape Orientations - Tested on Device and Simulator. Tested On: iPhone 7 10.3.2 Device & Simulator Mac OS Sierra (10.12.5) Ti SDK: 6.1.1.v20170609153006 Appc NPM: 4.2.9 App CLI: 6.2.2 Node v4.6.0 *Closing ticket.*

JSON Source