CODEWITHSUNDEEP
androidangularandroid-layoutnativescriptangular2-nativescript
Royi Namir
Royi Namir

Reputation: 148624

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

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).

Upvotes: 0

Views: 57

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

this is actually the expected behavior based on your used layout structure. The thing is that the StackLayout used to apply marginTop is stretched (no verticalAlignment set means that by default the layout will be stretched). To overcome this simply apply verticalAlignment setting.

For example:

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

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

Additional solutions can be found here

Upvotes: 3

Related Questions