Nativescript: StackLayout + Label with horizontal-align renders differently on iOS and Android

[NickIliev]

Tested on iOS 9.3 and Android API 23
When we have StackLayout with Label as a child and we set horizontal-align:center the result is that the Label position renders differently on the different platforms.
Code to reproduce the issue:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
      <Label text="Label" fontSize="24"/> 
      <Button text="TAP" tap="" />
  </StackLayout>
</Page>

StackLayout {
    horizontal-align: center;
    width: 100%;
    height: 100%;
}

result

[Obsessive]

In android what is happening is that, you have set the width and height of stacklayout as 100% it covers the whole screen and the layout will be center horizontally but the views inside it wont be horizontally center to get the text center you need to do this

<Label text="Label" fontSize="24" class="textcenter"/>

.textcenter{
  text-align: center;
}

and remove

width: 100%;
height: 100%;

[Obsessive]

[Obsessive]

So I think ios is not rendering it correctly.

[Obsessive]

It feels that ios is wrapping the views.

width: 100%;
height: 100%;

is not applied to the stacklayout in ios.

[Obsessive]

Can you post the screenshot of ios version in which the stacklayout has some background other than white to check whether stacklayout is filling the entire screen or not.

[hamorphis]

Everything is working exactly the same on both platforms.

I removed all the CSS, colored all the elements and added small margins so you can better see what goes where. Here is what the following XML will produce on both platforms:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" style.backgroundColor="green">
  <StackLayout style.backgroundColor="yellow" margin="5">
      <Label text="Label" fontSize="24" style.backgroundColor="red" margin="5" style.textAlignment="center"/> 
      <Button text="TAP" style.backgroundColor="blue" margin="5"/>
  </StackLayout>
</Page>

[hamorphis]

Sample project: https://github.com/hamorphis/issue-2107

[hamorphis]

Everything is working correctly and in identical manner on both platforms so I will close this issue, since there is no issue at all.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.