[TIMOB-24792] Android: Horizontal layouts do not behave correctly with 'right'
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2017-06-09T18:47:50.000+0000 |
| Affected Version/s | Release 6.1.0 |
| Fix Version/s | Release 6.1.1 |
| Components | Android |
| Labels | regression |
| Reporter | Gary Mathews |
| Assignee | Gary Mathews |
| Created | 2017-06-07T15:14:30.000+0000 |
| Updated | 2017-06-20T22:09:55.000+0000 |
Description
Views contained in a horizontal layout using
right do not display correctly.
var win = Ti.UI.createWindow({title: 'TIMOB-24277', backgroundColor: 'gray', layout: 'horizontal'}),
a = Ti.UI.createView({
height: 100,
width: 100,
borderColor: 'red',
borderWidth: 5,
backgroundColor: 'blue',
right: 10
}),
b = Ti.UI.createView({
height: 100,
width: 100,
borderColor: 'purple',
borderWidth: 5,
backgroundColor: 'orange',
right: 10
});
win.add([a, b]);
win.open();
Attachments
| File | Date | Size |
|---|---|---|
| LayoutTest.js | 2017-06-09T01:12:12.000+0000 | 16214 |
| Screen Shot 2017-06-07 at 4.08.13 PM.png | 2017-06-07T23:58:09.000+0000 | 185390 |
master: https://github.com/appcelerator/titanium_mobile/pull/9123 6_1_X: https://github.com/appcelerator/titanium_mobile/pull/9124
Node Version: 6.10.3 NPM Version: 3.10.10 Mac OS: 10.12.4 Appc CLI: 6.2.2 Appc CLI NPM: 4.2.9 Titanium SDK version: 6.2.0 (master) pr/9123 Appcelerator Studio, build: 4.9.0.201705302345-39 Xcode 8.3.2 [~gmathews] We tried with another test case by adding another view. It appears the views are placed out of order. Here is the testcase and a screen shot of what it produces:
var win = Ti.UI.createWindow({title: 'TIMOB-24277', backgroundColor: 'gray', layout: 'horizontal'}), a = Ti.UI.createView({ height: 100, width: 100, borderColor: 'red', borderWidth: 5, backgroundColor: 'blue', right: 10 }), b = Ti.UI.createView({ height: 100, width: 100, borderColor: 'purple', borderWidth: 5, backgroundColor: 'yellow', right: 10 }), c = Ti.UI.createView({ height: 100, width: 100, borderColor: 'purple', borderWidth: 5, backgroundColor: 'orange', right: 20 }); win.add([a, b, c]); win.open();Please see the attached "LayoutTest.js" file. It provides several view layout and positioning tests that we can use to help avoid regressions and to compare how layouts work between platforms. (I kept the code to 1 file for easy distribution between us.) This project's "Horizontal Wrapping (Bottom-Right Padding)" test currently fails on Android but works on iOS. This is the issue Gary is fixing.
[~jquick] awesome!
Updated the attached "LayoutTest.js" to include 3 new ListView item layout tests.
Verified the fix with SDK 6.1.1.v20170609120621 & 6.2.0.v2017060912085. Used the test case above & the attached
LayoutTest.jsto test. Closing. Studio Ver: 4.9.0.201705302345 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.3 Appc NPM: 4.2.9 Appc CLI: 6.2.2 Ti CLI Ver: 5.0.14 Alloy Ver: 1.9.11 Node Ver: 6.10.1 Java Ver: 1.8.0_101 Devices: ⇨ google Pixel --- Android 7.1.1 ⇨ google Nexus 5 --- Android 6.0.1Not sure if related textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT on textFields on Android seems to have stopped working after 6.1.0 and still not fixed on 6.1.1
[~fahad86] Do you have a test case? I can't reproduce your issue with:
var win = Ti.UI.createWindow({backgroundColor: 'gray'}), lbl = Ti.UI.createLabel({ text: 'TEST TEXT', width: Ti.UI.FILL, textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT }); win.add(lbl); win.open();Regarding [~fahad86]'s issue, that is a separate bug that has been written up here: [TIMOB-24866]