[TIMOB-23372] Windows: Layout with left & right break layout

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Open
Resolution	Unresolved
Affected Version/s	Release 5.3.0
Fix Version/s	n/a
Components	Windows
Labels	qe-5.4.0
Reporter	Kota Iguchi
Assignee	Kota Iguchi
Created	2016-05-13T03:02:15.000+0000
Updated	2019-10-24T18:02:18.000+0000

Description

Specifying both right and left doesn't work with horizontal layout. For example, following example should show this is test text text with yellow background, but it doesn't.

var win = Ti.UI.createWindow({backgroundColor:'green'});

var view = Ti.UI.createView({
    backgroundColor:'yellow',
    layout: "horizontal",
    top: 10,
    left: 10,
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
});

var label = Ti.UI.createLabel({
    left: 10,
    right: 10,
    color: "blue",
    text: "this is test text"
});

view.add(label);

win.add(view);
win.open();

*expected* !Expected.PNG|thumbnail! *actual* !Actual.PNG|thumbnail!

Attachments

File	Date	Size
Actual.PNG	2016-05-13T03:01:25.000+0000	7794
android_testcase.png	2016-05-16T07:54:24.000+0000	13946
Expected.PNG	2016-05-13T03:01:28.000+0000	3938
iPhone_6s_Plus_-_iPhone_6s_Plus___iOS_9_3__13E230_.png	2016-05-13T21:30:52.000+0000	8256
Screen Shot 2016-05-13 at 2.45.53 PM.png	2016-05-13T21:46:34.000+0000	41328
windows_testcase.png	2016-05-16T07:58:46.000+0000	11173
windows 10.png	2016-05-13T21:52:43.000+0000	14396

Comments

Kota Iguchi 2016-05-13

https://github.com/appcelerator/titanium_mobile_windows/pull/686

Josh Longton 2016-05-13

The layout will not respect the view with both a right and a left margin. *App.js*

   var win = Ti.UI.createWindow({backgroundColor:'green'});
    
   var view = Ti.UI.createView({
       backgroundColor:'yellow',
       layout: "horizontal",
       top: 10,
       left: 10,
       right: 10,
       height: Ti.UI.SIZE,
       width: Ti.UI.SIZE,
   });
    
   var label = Ti.UI.createLabel({
       left: 10,
       right: 10,
       color: "blue",
       text: "this is test text"
   });
    
   view.add(label);
    
   win.add(view);
   win.open();

Tested on: Windows Simulator (8.1) Windows Simulator (10) Windows 10 Studio: 4.6.0.201605131107 Ti SDK: 5.3.0.v20160513081655 Appc NPM: 4.2.5-5 App CLI: 5.3.0-45 Node v0.12.7 *Reopening Ticket.*

Kota Iguchi 2016-05-13

{quote} The layout will not respect the view with both a right and a left margin. {quote} [~jlongton] That's right. Actually both right and left margin is not respected. (see my code below) I should have mentioned that that's how iOS renders and Windows just tries to emulate it. **From iOS screenshot** !iPhone_6s_Plus_-_iPhone_6s_Plus___iOS_9_3__13E230_.png|thumbnail!

   var win = Ti.UI.createWindow({backgroundColor:'green'});
   var view = Ti.UI.createView({
       backgroundColor:'yellow',
       layout: "horizontal",
       top: 10,
       left: 10,
       height: Ti.UI.SIZE,
       width: Ti.UI.SIZE,
   });
   
   var label = Ti.UI.createLabel({
       left: 10,
       right: 10,
       color: "blue",
       text: "this is test text"
   });
   
   view.add(label);
   win.add(view);
   win.open();

Josh Longton 2016-05-13

[~kota] this is what i am getting on iOS for my code below !Screen Shot 2016-05-13 at 2.45.53 PM.png|thumbnail! Compared to windows 10 !windows 10.png|thumbnail!

   var win = Ti.UI.createWindow({backgroundColor:'green'});
    
   var view = Ti.UI.createView({
       backgroundColor:'yellow',
       layout: "horizontal",
       top: 10,
       left: 10,
       right: 10,
       height: Ti.UI.SIZE,
       width: Ti.UI.SIZE,
   });
    
   var label = Ti.UI.createLabel({
       left: 10,
       right: 10,
       color: "blue",
       text: "this is test text"
   });
    
   view.add(label);
    
   win.add(view);
   win.open();

Gary Mathews 2016-05-13

master: https://github.com/appcelerator/titanium_mobile_windows/pull/690 5_3_X: https://github.com/appcelerator/titanium_mobile_windows/pull/691
Kota Iguchi 2016-05-16

Just removed qe-5.3.0 label and 5.3.0 fixed version, because our main focus for 5.3.0 should be to make Corporate App look right asap and I would like to push a [simple workaround](https://github.com/appcelerator/titanium_mobile_windows/pull/697) just to make our Corporate App look good for 5.3.0. Since we have found some other issues regarding layout and it seems it requires fundamental changes in our layout engine, it sounds too much to push for 5.3.0 in this short time frame for the release. I would move this ticket (TIMOB-23372) target to 5.4.0 and I would like to resolve TIMOB-23293 asap with [my PR](https://github.com/appcelerator/titanium_mobile_windows/pull/697). cc [~jlongton]
Kota Iguchi 2016-05-23

https://github.com/appcelerator/titanium_mobile_windows/pull/709 For QE: For test cases and expected results, please refer to the examples [in the PR](https://github.com/appcelerator/titanium_mobile_windows/pull/709)
Josh Longton 2016-06-29

Verified. Tested on: Microsoft Lumia 640 (8.1) Windows Simulator (8.1) Microsoft Lumia 640 (10) Windows Simulator (10) Windows 10 Pro Studio: 4.7.0.201606220541 Ti SDK: 5.4.0.v20160629063537 Appc NPM: 4.2.7-2 App CLI: 5.4.0-23 Node v4.4.4 *Closing Ticket.*
Kota Iguchi 2018-10-17

Reopening, noticed this has been the issue again from some point of release, found this happens at least in 7.0.0.

JSON Source