{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5127","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5127/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5127/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5127/events","html_url":"https://github.com/NativeScript/NativeScript/issues/5127","id":278985365,"number":5127,"title":"Nativescript move element by 50% and not by 100%?","user":{"login":"RoyiNamir","id":2842123,"avatar_url":"https://avatars0.githubusercontent.com/u/2842123?v=4","gravatar_id":"","url":"https://api.github.com/users/RoyiNamir","html_url":"https://github.com/RoyiNamir","followers_url":"https://api.github.com/users/RoyiNamir/followers","following_url":"https://api.github.com/users/RoyiNamir/following{/other_user}","gists_url":"https://api.github.com/users/RoyiNamir/gists{/gist_id}","starred_url":"https://api.github.com/users/RoyiNamir/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RoyiNamir/subscriptions","organizations_url":"https://api.github.com/users/RoyiNamir/orgs","repos_url":"https://api.github.com/users/RoyiNamir/repos","events_url":"https://api.github.com/users/RoyiNamir/events{/privacy}","received_events_url":"https://api.github.com/users/RoyiNamir/received_events","type":"User","site_admin":false},"labels":[{"id":203689647,"url":"https://api.github.com/repos/NativeScript/NativeScript/labels/question","name":"question","color":"00AF64","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-12-04T12:52:48Z","updated_at":"2017-12-04T14:52:19Z","closed_at":null,"author_association":"NONE","body":"I have a simple demo project where : \r\n\r\n    <GridLayout>\r\n    \r\n        <StackLayout #myStack1 width=\"100\" height=\"100\" translateX=\"-50\" backgroundColor=\"red\" id=\"bbb\">\r\n        </StackLayout>\r\n    \r\n        <StackLayout #myStack2 width=\"100\" height=\"100\" translateX=\"50\" backgroundColor=\"green\" id=\"ccc\">\r\n        </StackLayout>\r\n    </GridLayout>\r\n\r\n[![enter image description here][1]][1]\r\n\r\n\r\nNotice that `width` and `height` are `100`.\r\n\r\nNow let's add `marginTop` to the `green` layout : \r\n\r\n    @ViewChild(\"myStack2\") private myStack2: ElementRef;\r\n    ngOnInit(): void {\r\n        this.myStack2.nativeElement.marginTop =100;\r\n      }\r\n\r\nBut look what happened : \r\n\r\n[![enter image description here][2]][2]\r\n\r\nIt moved by `50%` of `100` ( box dimensions are 100) . Why is that ? \r\n\r\n**Question:**\r\n\r\nWhy did that happen and how can I fix my code to actually marginTop `100` ?\r\n\r\nI'm not after  `translateY=100` ( which does show it as expected - I;m after the reason and solution for `marginTop`).\r\n    \r\n\r\n\r\n  [1]: https://i.stack.imgur.com/veZoD.png\r\n  [2]: https://i.stack.imgur.com/k3kiv.png"},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/348984613","html_url":"https://github.com/NativeScript/NativeScript/issues/5127#issuecomment-348984613","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5127","id":348984613,"user":{"login":"NickIliev","id":18008302,"avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false},"created_at":"2017-12-04T14:52:19Z","updated_at":"2017-12-04T14:52:19Z","author_association":"CONTRIBUTOR","body":"@RoyiNamir \r\n\r\nApart from [the solution](https://stackoverflow.com/questions/47633023/nativescript-move-element-by-50-and-not-by-100) with `verticalAlignment` set to `top` (which is not applicable in your case as you are seeking horizontally centered items) you can use the same approach with `verticalAlignment` set to `center` for both items but then once again the content will be \"stretched\" and you will need to apply `marginBottom` for the first box and `marginTop` for the second one.\r\n\r\nFor example:\r\n```\r\n<StackLayout orientation=\"horizontal\" backgroundColor=\"gray\">\r\n    <StackLayout col=\"0\" verticalAlignment=\"center\" marginBottom=\"100\" width=\"100\" height=\"100\" backgroundColor=\"red\">\r\n    </StackLayout>\r\n\r\n    <StackLayout col=\"1\" verticalAlignment=\"center\" marginTop=\"100\" width=\"100\" height=\"100\" backgroundColor=\"green\">\r\n    </StackLayout>\r\n</StackLayout>\r\n```\r\n\r\nOr using GridLayout (with set columns)\r\n```\r\n<GridLayout columns=\"auto auto\" backgroundColor=\"blue\">\r\n    <StackLayout col=\"0\" verticalAlignment=\"center\" marginBottom=\"100\" width=\"100\" height=\"100\" backgroundColor=\"red\">\r\n    </StackLayout>\r\n\r\n    <StackLayout col=\"1\" verticalAlignment=\"center\" marginTop=\"100\" width=\"100\" height=\"100\" backgroundColor=\"green\">\r\n    </StackLayout>\r\n</GridLayout>\r\n```\r\n\r\nA third option is to set the height of your parent layout and again use `verticalAlignment` set to `top`. Then you can position the parent layout to be vertically centered relatively to the main page layout.\r\n\r\n```\r\n<!--center the GridLayout to be vertically aligned in the center of the wanted layout -->\r\n<!-- Note that we are setting the height of the rows to 200 -->\r\n<GridLayout rows=\"200\" columns=\"auto auto\" backgroundColor=\"yellow\">\r\n    <StackLayout col=\"0\" verticalAlignment=\"top\" width=\"100\" height=\"100\" backgroundColor=\"red\">\r\n    </StackLayout>\r\n\r\n    <StackLayout col=\"1\" verticalAlignment=\"top\" width=\"100\" height=\"100\" marginTop=\"100\" backgroundColor=\"green\">\r\n    </StackLayout>\r\n</GridLayout>\r\n```\r\n\r\nDemo application demonstrating the above approached can be found [here](https://github.com/NickIliev/NS-Issues/tree/master/NativeScript/issue_5127)"}}
{"actor":{"display_login":"NickIliev"}}