Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24243] Android-Ti.UI.SIZE doesn't work properly with horizontal layouts

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-04-19T17:17:43.000+0000
Affected Version/sRelease 6.0.0
Fix Version/sRelease 6.0.2
ComponentsAndroid
Labelsmerge-6.0.2
ReporterNeeraj Mishra
AssigneeGary Mathews
Created2016-12-20T04:42:43.000+0000
Updated2017-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

FileDateSize
fixed.jpg2016-12-30T01:14:20.000+0000279208
horizontalWrapFalse.jpg2016-12-22T19:16:43.000+0000281152
horizontalWrapTrue.jpg2016-12-22T19:16:43.000+0000283475
index.js2016-12-20T04:44:23.000+0000914
index.tss2016-12-20T04:44:46.000+0000360
index.xml2016-12-20T04:44:37.000+0000613
label.jpg2016-12-22T19:17:29.000+000039743
screenshot-1.png2016-12-20T04:49:58.000+0000124606
Screen Shot 2016-12-22 at 11.46.57 AM.png2016-12-22T19:56:38.000+0000103542
screenshot-2016-12-22-with-change.png2016-12-22T22:13:09.000+0000269756
Screen Shot 2017-01-18 at 3.42.38 PM.png2017-01-18T23:51:15.000+0000123756
testcase.jpg2016-12-30T01:14:19.000+000038830

Comments

  1. Gary Mathews 2016-12-22

    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*
       <Alloy>
       	<Window class="container" layout="horizontal">
       		<ListView id="list" defaultItemTemplate="template">
       			<Templates>
       				<ItemTemplate name="template">
       					<View layout="vertical">
       						<View layout="horizontal" horizontalWrap="false" width="Ti.UI.FILL" height="Ti.UI.SIZE">
       							<Label bindId="serialNum"/>
       							<Label bindId="detail"/>
       						</View>
       						<View bindId="ackCheck" layout="horizontal" width="Ti.UI.FILL" height="Ti.UI.SIZE">
       							<Label bindId="ackLbl" class="ackText"/>
       							<View class="checkbox"/>
       						</View>
       					</View>
       				</ItemTemplate>
       			</Templates>
       			<ListSection/>
       		</ListView>
       	</Window>
       </Alloy>
       
    NOTE: horizontalWrap will change the wrapping of the detail 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!
  2. Gary Mathews 2016-12-22

    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 padding right: 10 fixes this. *TEST CASE*
       var w = Ti.UI.createWindow({backgroundColor: 'grey'}),
           v = Ti.UI.createView({
               top: 0,
               backgroundColor: 'red',
               width: Ti.UI.FILL,
               height: Ti.UI.SIZE,
               layout: 'horizontal'
           }),
           n = Ti.UI.createLabel({
               top: 0,
               text: '1.',
               backgroundColor: 'purple'
           }),
           t = Ti.UI.createLabel({
               text: 'Replenish the Uranium rod with dry ice every 6 hours.',
               width: Ti.UI.FILL,
               backgroundColor: 'orange'
           });
       
       v.add([n, t]);
       
       w.add(v);
       w.open();
       
    !label.jpg|thumbnail!
  3. Gary Mathews 2016-12-22

    [~nmishra] That seems to work.
       <View width="Ti.UI.SIZE" layout="vertical">
       <Label bindId="detail" width="95%"/>
       
    Also works
  4. Gary Mathews 2016-12-30

    master: https://github.com/appcelerator/titanium_mobile/pull/8720 To resolve the layout issue with this fix amend the following:
       <View layout="horizontal">
           ...
               <Label bindId="detail" width="Ti.UI.FILL"/>
       
    !fixed.jpg|thumbnail!
  5. Dongwoo Gim 2017-01-13

  6. Abir Mukherjee 2017-01-18

    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!
  7. Dongwoo Gim 2017-01-20

    Bugs fix and commit cleanup https://github.com/appcelerator/titanium_mobile/pull/8766
  8. Gary Mathews 2017-01-26

    6_0_X: https://github.com/appcelerator/titanium_mobile/pull/8794
  9. Andy Waldman 2017-01-27

    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:
       var win = Ti.UI.createWindow({
         backgroundColor: '#fff',
         layout: "vertical"
       });
       
       // first row
       var view = Ti.UI.createView({
         height: Ti.UI.SIZE,
         width: Ti.UI.FILL,
         layout: "horizontal",
         backgroundColor: "gray"
       });
       
       var view1 = Ti.UI.createView({
         width: "25%",
         height: 100,
         backgroundColor: "red"
       });
       
       var view2 = Ti.UI.createView({
         width: "25%",
         height: 100,
         backgroundColor: "green"
       });
       
       var view3 = Ti.UI.createView({
         width: "25%",
         height: 100,
         backgroundColor: "blue"
       });
       
       var view4 = Ti.UI.createView({
         width: "25%",
         height: 100,
         backgroundColor: "yellow"
       });
       
       view.add(view1);
       view.add(view2);
       view.add(view3);
       view.add(view4);
       
       // second row
       var v = Ti.UI.createView({
         backgroundColor: 'red',
         width: Ti.UI.FILL,
         height: Ti.UI.SIZE,
         layout: 'horizontal'
       });
       
       var n = Ti.UI.createLabel({
         top: 0,
         text: '1.',
         backgroundColor: 'purple'
       });
       
       var t = Ti.UI.createLabel({
         text: 'Replenish the Uranium rod with dry ice every 6 hours Hello andy how are you.',
         width:  Ti.UI.FILL,
         backgroundColor: 'orange'
       });
       
       v.add(n);
       v.add(t);
       
       // third row
       var third = Ti.UI.createView({
         backgroundColor: 'grey',
         left: 20, right: 20,
         width: Ti.UI.FILL,
         height: Ti.UI.SIZE,
         layout: 'horizontal'
       });
       
       function createItem(_text) {
         var wrap = Ti.UI.createView({
           backgroundColor:"#ffffff",
           width:Ti.UI.SIZE, height:31,
           left:3, right:3, top:4, bottom: 4,
           borderColor: "#ff5757", borderRadius: 15.5, borderWidth: 1
         });
       
         var labelWrap = Ti.UI.createView({
           width:Ti.UI.SIZE, height: Ti.UI.SIZE,
           left: 14, right: 14
         });
       
         var label = Ti.UI.createLabel({
           height : 18,
           width: Ti.UI.SIZE,
           wordWrap:false,
           color:"#ff5757", font: { fontSize: 14, fontWeight: 'regular' },
           textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
           text: _text
         });
       
         labelWrap.add(label);
         wrap.add(labelWrap);
         return wrap;
       }
       
       third.add( createItem('#한자급수') );
       third.add( createItem('#자유학기제') );
       third.add( createItem('#기반학습') );
       third.add( createItem('#많은수업시간') );
       third.add( createItem('#레벨시스템') );
       third.add( createItem('#담임제도') );
       
       // add to win
       win.add(view);
       win.add(v);
       win.add(third);
       win.open();
       
    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
  10. Michael Gangolf 2017-04-10

    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.
  11. Hans Knöchel 2017-04-11

    [~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.
  12. Michael Gangolf 2017-04-19

    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.

JSON Source