[TIMOB-24243] Android-Ti.UI.SIZE doesn't work properly with horizontal layouts
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Critical |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2017-04-19T17:17:43.000+0000 |
Affected Version/s | Release 6.0.0 |
Fix Version/s | Release 6.0.2 |
Components | Android |
Labels | merge-6.0.2 |
Reporter | Neeraj Mishra |
Assignee | Gary Mathews |
Created | 2016-12-20T04:42:43.000+0000 |
Updated | 2017-04-19T17:19:56.000+0000 |
Description
Problem Description:
When the parent is in horizontal layout and the right child's width is Ti.UI.FILL(occupying the available space left) with its height Ti.UI.SIZE to fit its content, some of the content is getting chopped off.Steps to Reproduce:
Use the attached app (index.xml, index.js , index.tss) to reproduce the problem and see the behavior.Current Behavior:
You can see that the layout in items 2, 4, 6, 8 and 10 is distorted because of which "ACKNOWLEDGE" portion is chopped off. Note: If 2 more characters are added to the text in these rows, layout will be adjusted properly. This says that the layout is getting distorted for specific number of characters.Expected Behavior:
The goal is: ------------------------------- |Header1 | Label1 | | | Label2 | | | Label3 | | | Label4 | ------------------------------- |Header2 | Label1 | | | Label2 | | | Label3 | | | Label4 | -------------------------------Attachments
File | Date | Size |
---|---|---|
fixed.jpg | 2016-12-30T01:14:20.000+0000 | 279208 |
horizontalWrapFalse.jpg | 2016-12-22T19:16:43.000+0000 | 281152 |
horizontalWrapTrue.jpg | 2016-12-22T19:16:43.000+0000 | 283475 |
index.js | 2016-12-20T04:44:23.000+0000 | 914 |
index.tss | 2016-12-20T04:44:46.000+0000 | 360 |
index.xml | 2016-12-20T04:44:37.000+0000 | 613 |
label.jpg | 2016-12-22T19:17:29.000+0000 | 39743 |
screenshot-1.png | 2016-12-20T04:49:58.000+0000 | 124606 |
Screen Shot 2016-12-22 at 11.46.57 AM.png | 2016-12-22T19:56:38.000+0000 | 103542 |
screenshot-2016-12-22-with-change.png | 2016-12-22T22:13:09.000+0000 | 269756 |
Screen Shot 2017-01-18 at 3.42.38 PM.png | 2017-01-18T23:51:15.000+0000 | 123756 |
testcase.jpg | 2016-12-30T01:14:19.000+0000 | 38830 |
I taken a look at your
index.xml
and found a few issues with the layout. Here's the changes I have made: *index.xml*NOTE:
horizontalWrap
will change the wrapping of thedetail
label. Here's screenshots of how it will look on a mobile device with text that is too long to fit on one line. *horizontalWrap="false"* !horizontalWrapFalse.jpg|thumbnail! *horizontalWrap="true"* !horizontalWrapTrue.jpg|thumbnail! Hope this solves your issue!However, I have noticed an issue with wrapping of
Label
. It creates a space and doesn't wrap the text onto the next line. Adding more characters or paddingright: 10
fixes this. *TEST CASE*!label.jpg|thumbnail!
[~nmishra] That seems to work.
Also works
master: https://github.com/appcelerator/titanium_mobile/pull/8720 To resolve the layout issue with this fix amend the following:
!fixed.jpg|thumbnail!
Tested with this environment: NPM Version: 2.15.9 Node Version: 4.5.0 Mac OS: 10.12.1 Appc CLI: 6.1.0 Appc CLI NPM: 4.2.8 Titanium SDK version: 6.1.0.v20170118081704 Appcelerator Studio, build: 4.8.1.201612050850 Xcode 8.2 Android Device: 6.0.1 I tested with the above environment, and the "ACKNOWLEDGE" portion is still getting truncated when question wraps around to two lines. This can also be seen with the Emulator (attached). [~gmathews] Above you mention that some code needs to be amended. Can you please clarify how to amend it? Or better, if you can attach/paste the complete code. !Screen Shot 2017-01-18 at 3.42.38 PM.png|thumbnail!
Bugs fix and commit cleanup https://github.com/appcelerator/titanium_mobile/pull/8766
6_0_X: https://github.com/appcelerator/titanium_mobile/pull/8794
Friday 27th January 2017 ENV: MacOS:10.12.1 XCODE: 8.2.1 GM (golden master) APPC CLI Core: 6.1.0 APPC CLI NPM: 4.2.8 SDK: 6.0.2.v20170126173908 Studio build: 4.8.1.201612050850 NPM: 2.15.9 Node: 4.5.0 Step 1) copy this into app.js:
Step 2) run the application Step 3) see that the writing wraps properly horizontally I can verify this ticket is working and will close it
I have a very complex layout with multiple textfields and labels (all height: ti.ui.size) inside a view/scrollview (like a popup) with horizontal layout. 6.0.1.GA shows all elements but >=6.0.2.GA the elements are only visible up to a certain height. I will try to narrow it down and create a example. But it looks like this patch made it stop working on android.
[~michael] Reopened the ticket, can you try to provide your specific test-case asap? I saw this behavior as well, but it's also a quite complex (Alloy-based) layout.
At the moment I wasn't able to create a test case. I can provide some log output if that helps. Its a very complex layout and can't extract the layout that easily. I have some screenshots, a video of the hierarchy view and could add some logs in TiCompositeLayout.java.