[TIMOB-25834] iOS: Horizontal layout behavior change with 7.0 and multi line labels
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | n/a |
| Labels | n/a |
| Reporter | Christy Thomas |
| Assignee | Vijay Singh |
| Created | 2018-02-28T14:21:21.000+0000 |
| Updated | 2018-03-06T04:22:56.000+0000 |
Description
The horizontal layout was working as expected in 6.0.3 with labels that are multi line. Now with 7.0.2 the multi line label is no longer horizontal, but ends up vertical.
In 6.1.0 CLI, 6.0.3 TI SDK the horizontal layout worked correctly with a multi line label.
!Screen Shot 2018-02-28 at 9.05.51 AM.png|thumbnail!
In 7.0.2 CLI, 7.0.2 Ti SDK the horizontal layout is no longer horizontal with a multi line label.
!Screen Shot 2018-02-28 at 9.13.14 AM.png|thumbnail!
Code to reproduce:
index.xml
<Alloy>
<Window class="container">
<View layout="vertical" top="50">
<Button onClick="onClick" title="Click"/>
<View id="message_section">
<ImageView id="icon" accessibilityLabel="confirmation_icon"/>
<Label id="message" accessibilityValue="confirmation_message"/>
</View>
<View id="message_section_good">
<ImageView id="icon_good" accessibilityLabel="confirmation_icon"/>
<Label id="message_good" accessibilityValue="confirmation_message"/>
</View>
<View id="message_section_changeless">
<ImageView id="icon_changeless" accessibilityLabel="confirmation_icon"/>
<Label id="message_changeless" accessibilityValue="confirmation_message"/>
</View>
</View>
</Window>
</Alloy>
".container": {
backgroundColor:"white"
}
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
'#message_section': {
layout: 'horizontal',
borderColor: 'orange',
top: 36,
left: 50,
right: 50,
width: Ti.UI.FILL,
height: Ti.UI.SIZE
},
'#icon': {
width: 0,
borderColor: 'red',
top: 0,
height: 0,
visible: false
},
'#message': {
borderColor: 'blue',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
'#message_section_good': {
layout: 'horizontal',
borderColor: 'orange',
top: 36,
left: 50,
right: 50,
width: Ti.UI.FILL,
height: Ti.UI.SIZE
},
'#icon_good': {
width: 0,
borderColor: 'red',
top: 0,
height: 0,
visible: false
},
'#message_good': {
borderColor: 'blue',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}
'#message_section_changeless': {
layout: 'horizontal',
borderColor: 'orange',
top: 36,
left: 50,
right: 50,
width: Ti.UI.FILL,
height: Ti.UI.SIZE
},
'#icon_changeless': {
width: 40,
borderColor: 'red',
top: 0,
height: 40,
image: 'appicon.png',
visible: true
},
'#message_changeless': {
borderColor: 'blue',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
left: 10,
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}
function onClick() {
$.icon.setWidth(40);
$.icon.setHeight(40);
$.icon.setImage('appicon.png');
$.icon.setVisible(true);
$.message.setLeft(10);
$.icon_good.setWidth(40);
$.icon_good.setHeight(40);
$.icon_good.setImage('appicon.png');
$.icon_good.setVisible(true);
$.message_good.setLeft(10);
}
$.message.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved');
// This works
$.message_good.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved');
$.message_changeless.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved');
$.index.open();
Attachments
| File | Date | Size |
|---|---|---|
| Screen Shot 2018-02-28 at 9.05.51 AM.png | 2018-02-28T14:16:25.000+0000 | 65516 |
| Screen Shot 2018-02-28 at 9.13.14 AM.png | 2018-02-28T14:16:31.000+0000 | 89480 |
Hello, This is a vlid issue with SDK 7.0.2.GA. The layout is no longer horizontal with a multi line label. Thanks.
Simple test case to reproduce issue -
var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var viewMsgSec = Ti.UI.createView({ layout: 'horizontal', borderColor: 'orange', width: Ti.UI.SIZE, height: Ti.UI.SIZE, }); var imgView = Ti.UI.createImageView({ width: 40, borderColor: 'red', top: 0, height: 40, image: 'iconimg.png' }); var label = Ti.UI.createLabel({ left: 10, borderColor: 'blue', height: Ti.UI.SIZE, width: Ti.UI.SIZE, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, text: 'Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved' }); viewMsgSec.add(imgView); viewMsgSec.add(label); win.add(viewMsgSec); win.open();This issue is caused by fix of TIMOB-24753. I'll look in this. Workaround for this can be- If we can give percentage width or fix width to label, this problem will not arise. If we change the index.js with following code , it will solve the problem.
function onClick() { $.icon.setWidth(40); $.icon.setHeight(40); $.icon.setImage('appicon.png'); $.icon.setVisible(true); $.message.setLeft(10); $.message.setWidth(labelWidth); $.icon_good.setWidth(40); $.icon_good.setHeight(40); $.icon_good.setImage('appicon.png'); $.icon_good.setVisible(true); $.message_good.setLeft(10); $.message_good.setWidth(labelWidth); } var labelWidth = Ti.Platform.displayCaps.platformWidth - 50 - 50 - 40 - 10; $.message.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved'); // This works $.message_good.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved'); $.message_changeless.setText('Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved Copyright (c) 2014-2018, Appcelerator, Inc. All Rights Reserved'); $.message_changeless.setWidth(labelWidth); $.index.open();