Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23391] iOS: View is not getting horizontally wrapped properly.

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2017-02-15T23:09:00.000+0000
Affected Version/sRelease 5.2.2
Fix Version/sRelease 6.1.0
ComponentsiOS
Labelsn/a
ReporterNikesh Vasant Mahajan
AssigneeVijay Singh
Created2016-05-13T05:34:31.000+0000
Updated2017-05-31T11:52:24.000+0000

Description

Steps to Reproduce: 1. Create array of Strings. i.e. var stringArray = [ "Appcelerator Studio", " Titanium", .... ]; 2. Create a view with dynamic height and layout as horizontal. 3. Create a loop with Array length. a. Create a view with dynamic width and give "left" property some value in "dp". b. Create a label with "wordWrap", "ellipsize" property as false and add "text" property with one string value as per index given in Array. c. Add the label in current view. d. Add the current view in horizontal view. Expected Result : Horizontal view should wrap the views inside horizontal view properly without cropping the label. Actual Result: Horizontal view does not wrap the views inside horizontal view and label gets cropped.

Attachments

FileDateSize
index.js2016-05-13T05:16:49.000+0000965
index.tss2016-05-13T05:16:33.000+0000189
index.xml2016-05-13T05:16:07.000+000095
Screen Shot 2016-05-14 at 3.37.50 AM.png2016-05-13T21:38:39.000+000015721
Simulator Screen Shot 13-May-2016, 10.41.07 AM.png2016-05-13T05:15:20.000+000054702

Comments

  1. Sharif AbuDarda 2016-05-13

    Hello, I tested the below code following your provided steps. 
       var stringArray = [ 'Appcelerator', 'Titanium', 'HelloWorld', 'Hello', 'World' ];
   
   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();
    I don't not see any out of the ordinary behavior. Horizontal view wrap the views inside horizontal view properly without cropping the label. See the screenshot. Thanks.
  2. Nazmus Salahin 2016-05-15

    Hello, I have found that view is getting horizontally wrapped properly on Android platform for the given code. I tried alloy project given in the issue attachment. OUTPUT : [Screenshot](https://i.imgsafe.org/180f67c.png) Thanks *Environment*: *Device info:* Htc One(android 4.4.3) *Node.js Version:* 0.12.7 *npm Version:* 2.11.3 *Titanium SDKs:* 5.2.2.GA and 5.2.1.GA *Java Development Kit Version:* 1.8.0_73 *Titanium CLI Version:* 5.0.5 *Appcelerator CLI Version:* 5.2.2 *Appcelerator Studio:* 4.5.0
  3. Nikesh Vasant Mahajan 2016-05-16

    Hi, @Nazmus Salahin: Thank you for sharing that information on Android devices. @Sharif AbuDarda : Can you please check this issue on iPhone devices (iPhone - 4/5/5S/6). And Please use the following array. 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"];
  4. Sharif AbuDarda 2016-05-17

    Hello, I can see the horizontally wrapped is not working for iOS platform with the given word set. 
       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"];
    The same property works fine for Android, When the worde needs multiple lines to display. In iOS the words gets cutdown which are at the corner of the line. [Screenshots](http://tinypic.com/view.php?pic=287hm5y&s=9#.VztAkGaeT8U) Tested with SDK: 5.2.2.GA, Appcelerator Command-Line Interface, version 5.2.2 , iPod 5G(9.2). This is a valid bug in IOS. Regards, Sharif.
  5. Muhammad Qasim 2016-11-30

    I am having the exact same problem but I think I'll have to forget about it. May be it'll fix in *_"undefined"_* years.
  6. Vijay Singh 2017-01-31

    PR: https://github.com/appcelerator/titanium_mobile/pull/8805
  7. Eric Wieber 2017-02-15

    FR Passed. Tested using: MacOS 10.12 (16A323) Studio 4.8.1.201701192045 Ti SDK 6.1.0 Appc NPM 4.2.8 Appc CLI 6.1.0 Alloy 1.9.6 Xcode 8.3 (8W120l) Tested the provided sample code, ran our layout test suites, KitchenSink tests around layout, and any local projects I had that modified layouts in any way. No errors encountered
  8. Eric Wieber 2017-02-16

    Verified in SDK build 6.1.0.v20170215164209

JSON Source