Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19462] iOS: Titanium Labels not aligned on horizontal layout in a view

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionCannot Reproduce
Resolution Date2019-12-06T23:25:52.000+0000
Affected Version/sRelease 3.5.1, Release 4.0.0, Release 4.1.0
Fix Version/sn/a
ComponentsiOS
LabelsAlloy, label, layout, reprod, view
Reporter Ricardo Ramirez
AssigneeEric Merriman
Created2015-09-03T06:31:57.000+0000
Updated2019-12-06T23:25:52.000+0000

Description

Issue Description

There is an horizontal view and when the user add Labels and/or text inputs to the view the label text is not aligned at the edge of the screen, see the attached image.

Expected behavior

The text should be aligned

Steps to Replicate:

1. Create a new titanium classic default project 2. Open the app.js file 3. Replace the app.js with the code in the test case 4. Run on iOS iphone 5/5S

Test Case

var mainWindow =Ti.UI.createWindow({
top:20,
backgroundColor:'white',
layout:'horizontal'
});

var mainView = Ti.UI.createView({
backgroundColor:'white',
layout:'horizontal'
});
 

var label1 = Ti.UI.createLabel({
text : 'label1 ',
});

var label2 = Ti.UI.createLabel({
text : 'label2 ',
});
var label3 = Ti.UI.createLabel({
text : 'label3 ',
});
var label4 = Ti.UI.createLabel({
text : 'label4 ',
});

var input = Ti.UI.createTextField({
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  keyboardType:"Ti.UI.KEYBOARD_DECIMAL_PAD",
  textAlign:"right",
  enableReturnKey:"true", 
  keyboardToolbarColor:"#999",
  returnKeyType:"Ti.UI.RETURNKEY_DONE",
  hintText:"8.0",
  maxLength:"4",  
  color: '#336699'
});

var label5 = Ti.UI.createLabel({
text : 'label5 ',
});

var label6 = Ti.UI.createLabel({
text : 'label6 ',
horizontalWrap: true
});
var label7 = Ti.UI.createLabel({
text : 'label7 ',
});
var label8 = Ti.UI.createLabel({
text : 'label8 ',
});


// Add to the parent view.
mainView.add(label1);
mainView.add(label2);
mainView.add(label3);
mainView.add(label4);
mainView.add(input);
mainView.add(label5);
mainView.add(label6);
mainView.add(label7);
mainView.add(label8);

mainWindow.add(mainView);
mainWindow.open();

Attachments

FileDateSize
Screen Shot 2015-09-03 at 1.03.30 AM.png2015-09-03T06:31:23.000+000028775
Screen Shot 2015-11-19 at 2.16.00 PM.png2015-11-19T23:01:38.000+000027229

Comments

  1. Angel Petkov 2015-11-18

    Hello , I'm sorry to hear that you're experiencing issues with the platform. We've tested the issue using the app.js provided in the description, on the latest SDK(5.1.0) and the issue is not reproducible. I managed to reproducible the issue by creating a for loop in which i added 10 labels without specifying the height. However if the label height is specified the view behaves as expected. Also the app.js provided isn't the same , as the one used on screenshot , if you could update it please. Thank you!
  2. Ricardo Ramirez 2015-11-19

    Hello Angel ! did you used the 5/5S emulator ?, another way to reproduce is using liveview and add more labels, Please also try using the SDK 5.0.2 GA.
  3. Angel Petkov 2015-11-19

    I just tested it on 5.0.3 GA and iPhone 5's simulator works as expected. We've also tested it on a 5s device both through Xcode and Appcelerator studio. Ive attached a screen shot to the ticket.
  4. Angel Petkov 2015-11-24

    After some testing we belive that this is not a bug but the expected behavior of the View. If a label is too big to fit on the screen please specify the height of the button and it will fix the layout issue. If you encounter any other issue's feel free to leave a comment and we will do anything we can to resolve it. Thank you!
  5. Alan Hutton 2019-12-06

    Unable to reproduce. Labels are aligning properly. Axway Appcelerator Studio, build: 5.1.4.201909061933  macOS : 10.15 Node.js Version : 8.9.1 npm Version : 5.5.1 Appcelerator CLI : 7.1.2 Titanium CLI CLI Version : 5.2.1 node-appc Version : 0.2.49 Titanium SDKs : 8.3.0.GA iPhone 11 13.2.2

JSON Source