[TIMOB-23293] Windows: Corporate Directory App layout issue
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2016-05-16T08:47:03.000+0000 |
| Affected Version/s | Release 5.3.0 |
| Fix Version/s | Release 5.3.0 |
| Components | Windows |
| Labels | qe-5.3.0 |
| Reporter | Harry Bryant |
| Assignee | Kota Iguchi |
| Created | 2016-04-29T06:40:05.000+0000 |
| Updated | 2016-05-18T20:36:48.000+0000 |
Description
Layout issue at directory view on [Corporate Directory App](https://github.com/appcelerator-se/corporate-directory). It happens both Windows Phone 8.1 and Windows 10.
Attachments
| File | Date | Size |
|---|---|---|
| 072a6bda-1121-11e6-8bc0-112abf56df33.PNG | 2016-05-12T23:59:30.000+0000 | 13502 |
| android_left.png | 2016-05-15T20:17:44.000+0000 | 11581 |
| DirectoryAppLayout.PNG | 2016-04-29T06:38:24.000+0000 | 37476 |
| e58200e8-1b74-11e6-8a10-04ea3eb42789.PNG | 2016-05-16T09:24:34.000+0000 | 63526 |
| incorrectAlignment.png | 2016-05-17T18:11:36.000+0000 | 60462 |
| Windows_8_1.png | 2016-05-16T09:36:45.000+0000 | 61861 |
| windows_right.png | 2016-05-15T20:17:44.000+0000 | 6855 |
Is this just happening on Corporate Directory? Is it a general issue with layouts for custom fonts? I'm not sure what sort of severity/priority this is. I suppose since it's a regression it doesn't matter and we need to fix for 5.3.0?
I think it's not a regression but found some issue in ScrollView and Label. Pushed some improvements: https://github.com/appcelerator/titanium_mobile_windows/pull/660
I merged your changes, however, there are still some issues
[~htbryant] [~emerriman] Ok, so i thought this relied on other changes in master that would make it hard to back port. Apparently it does not. So I cherry-picked the PR for 5_3_X to fix some of the layout issues. However, I agree the demo you gave during our standup is bad, so if there are remaining issues, I think we need to open specific tickets for those and I will try my best to investigate them and fix them ASAP. I recall seeing it always complaining about MapService token for you, a blank non-scrollable area (which I _think_ this PR fixes), and the broken looking icon font buttons.
Current state: !072a6bda-1121-11e6-8bc0-112abf56df33.PNG|thumbnail!
For the
"MapServiceToken not specified"error, it is obviouslymapservicetokenis not specified, and I was able to erase it locally by specifying validmapservicetokenintiapp.xmllike below. ([Related PR](https://github.com/appcelerator/titanium_mobile_windows/pull/516))<windows> <mapservicetoken>xxxxx</mapservicetoken> <windows>So... I'm looking into the Label alignment issue and I found something strange. When using percentage
leftorright,rightpadding is appended to the parent. Which is why we have the Corporate Directory misalignment, since we don't need left align the first element to offset the extra padding.var win = Ti.UI.createWindow({ backgroundColor: 'red' }), view_h = Ti.UI.createView({ layout: "horizontal", top: 10, height: Ti.UI.SIZE, width: Ti.UI.SIZE, backgroundColor: 'orange' }), a = Ti.UI.createView({ backgroundColor: 'yellow', height: 60, width: 60, left: '10%' // why does this add right padding on iOS/Android }), b = Ti.UI.createView({ backgroundColor: 'green', height: 60, width: 60 }); view_h.add(a); view_h.add(b); win.add(view_h); win.open();Thank you for looking into this [~gmathews]! We have been finding some other issues regarding layout and (I think) it might be too much to push into 5_3_X in this short time frame for the release. Since it will be a fundamental changes in our LayoutEngine, we should be testing it very carefully in good time...For 5_3_X I would push a [simple workaround](https://github.com/appcelerator/titanium_mobile_windows/pull/697) for now and let QE guys test this app asap to be able to prep 5_3_X. But thanks again, I will be looking into this issue too.
https://github.com/appcelerator/titanium_mobile_windows/pull/699
Current state: !e58200e8-1b74-11e6-8a10-04ea3eb42789.PNG|thumbnail!
Without maptoken warning: !Windows_8_1.png|thumbnail!
Tested the Directory App with SDK
5.3.0.v20160516040258and the majority of layout issues appear to be resolved. However after comparing the app on Windows to Android / iOS I noticed a few remaining issues: 1. The 3 custom icons are not properly centered. 2. The three contact details below are interactive on Android / iOS whereas there is no interactivity on the Windows platform. 3. A contact window can be scrolled in any direction (via touch & drag) on Windows, but it is locked from doing so on Android / iOS. Can these changes be implemented for 5_3_X? Tested on: Windows 10 Pro Windows Phone 10.0 (Microsoft Lumia 640 LTE) Appc Studio: 4.6.0.201605030516 Ti SDK: 5.3.0.v20160516040258 Appc NPM: 4.2.5-5 Appc Core: 5.3.0-44 Node: v4.4.4{quote} 1. The 3 custom icons are not properly centered. {quote} You mean 3rd one (chat icon), or all three icons? I don't quite get what's wrong, can you describe more on the proper layout? {quote} 2. The three contact details below are interactive on Android / iOS whereas there is no interactivity on the Windows platform. {quote} I guess you mean clickable link
Ti.UI.Label.autoLinkon the contact detail texts? Tested it on iOS simulator but it doesn't seem interactive. I've added new feature request: TIMOB-23388 {quote} 3. A contact window can be scrolled in any direction (via touch & drag) on Windows, but it is locked from doing so on Android / iOS. {quote} Added ticket for it so we can track this: TIMOB-23387I've attached a screenshot which demonstrates the misalignment of the 3 custom buttons. Note that the Red lines represent the positioning of the buttons, and the black line represents the absolute center.
The remaining issues are being addressed in separate tickets, ( TIMOB-23388 , TIMOB-23387 , TIMOB-23408 ). *Closing Ticket* As the original layout issues have been resolved.