Nativescript move element by 50% and not by 100%?


#1

I have a simple demo project where :

<GridLayout>

    <StackLayout #myStack1 width="100" height="100" translateX="-50" backgroundColor="red" id="bbb">
    </StackLayout>

    <StackLayout #myStack2 width="100" height="100" translateX="50" backgroundColor="green" id="ccc">
    </StackLayout>
</GridLayout>

enter image description here

Notice that width and height are 100.

Now let’s add marginTop to the green layout :

@ViewChild("myStack2") private myStack2: ElementRef;
ngOnInit(): void {
    this.myStack2.nativeElement.marginTop =100;
  }

But look what happened :

enter image description here

It moved by 50% of 100 ( box dimensions are 100) . Why is that ?

Question:

Why did that happen and how can I fix my code to actually marginTop 100 ?

I’m not after translateY=100 ( which does show it as expected - I;m after the reason and solution for marginTop).


#2

Hey @Royi_Namir,

I’m also a little confused by the behavior you’re seeing, so if anyone from the community has any ideas I’d be curious on exactly why the margin isn’t being applied as expected.

That being said, the way you’re using the <GridLayout> here is a bit weird, and you could easily accomplish the same display by just using its rows and columns attributes.

<GridLayout rows="100, 100">
    <StackLayout row="0" width="100" height="100" translateX="-50" backgroundColor="red">
    </StackLayout>

    <StackLayout row="1" width="100" height="100" translateX="50" backgroundColor="green">
    </StackLayout>
</GridLayout>

Here’s that example running in NativeScript Playground: https://play.nativescript.org/?template=play-ng&id=A4EOoB&v=2.


#3

Hi @tjvantoll

I think I know what’s the reason. correct me if i’m wrong :

Here is my assumption :


#4

Gotcha. I’ll follow along in that GitHub thread.