Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25949] Windows: Wrong layout with bottom/right and center

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-09-26T21:42:44.000+0000
Affected Version/sRelease 7.1.0
Fix Version/sRelease 7.5.0
ComponentsWindows
Labelsn/a
ReporterKota Iguchi
AssigneeKota Iguchi
Created2018-04-10T07:30:30.000+0000
Updated2019-04-26T17:35:27.000+0000

Description

bottom property is not calculated property when it is used with center property.
var view1 = Ti.UI.createView({
    width: 400, height: 400,
    backgroundColor: 'white'
}),
view2 = Ti.UI.createView({
    backgroundColor: 'blue',
    center: {
        x: 200,
        y: 200
    },
    width: 100, bottom: 100
}),
view3 = Ti.UI.createView({
    backgroundColor: 'red',
    width: Ti.UI.FILL, height: 1, bottom: 100
});
var win = Ti.UI.createWindow({
    backgroundColor: 'green'
});
view1.add(view2);
view1.add(view3);
win.add(view1);
win.open();
Actual: The blue box (view2) and ed line (view3) are not aligned !b.png|thumbnail! Expected: The blue box (view2) should be aligned with red line (view3). !a.png|thumbnail! More test cases:
var view = Ti.UI.createView({
    height: 200,
    width: 200,
    backgroundColor: 'gray'
}),
    viewChild = Ti.UI.createView({
        backgroundColor: 'blue',
        center: {
            x: 100
        },
        right: 50
    }),
    line = Ti.UI.createView({
        backgroundColor: 'red',
        width: 1, height: Ti.UI.FILL,
        right: 50, top: 0
    });
var win = Ti.UI.createWindow();
viewChild.addEventListener('postlayout', function () {
    Ti.API.info(viewChild.size.width + ' should eql(100)');
});
view.add(viewChild);
view.add(line);
win.add(view);
win.open();
var view = Ti.UI.createView({
    height: 200,
    width: 200,
    backgroundColor: 'gray'
}),
    viewChild = Ti.UI.createView({
        backgroundColor: 'blue',
        center: {
            y: 100
        },
        bottom: 50
    }),
    line = Ti.UI.createView({
        backgroundColor: 'red',
        width: Ti.UI.FILL, height: 1,
        bottom: 50, left: 0
    });
var win = Ti.UI.createWindow();
viewChild.addEventListener('postlayout', function () {
    Ti.API.info(viewChild.size.width + ' should eql(200)');
});
view.add(viewChild);
view.add(line);
win.add(view);
win.open();

Attachments

FileDateSize
a.png2018-04-10T07:29:54.000+00003713
b.png2018-04-10T07:31:55.000+00003237

Comments

  1. Kota Iguchi 2018-04-11

    https://github.com/appcelerator/titanium_mobile_windows/pull/1226
  2. Keerthi Mahalingam 2018-09-26

    FR passed. PR merged.
  3. Keerthi Mahalingam 2018-09-27

    Verified the fix on SDK 7.5.0.v20180927072643 . Layout works fine. Closing.
       Name                        = Microsoft Windows 10 Pro 
         Version                     = 10.0.17134 
         Architecture                = 64bit 
         Node.js 
         Node.js Version             = 8.9.1 
         npm Version                 = 5.5.1 
       Titanium CLI 
         CLI Version                 = 5.1.1 
       Titanium SDK 
         SDK Version                 = 7.5.0.v20180927072643 
       Device 
       Lumia 650 dual sim 
       Mobile emulator 10.0.14393 1080p 
       

JSON Source