Nativescript-angular: "margin" Not working inside ng-template with GridLayout

[bhavincb]

https://play.nativescript.org/?template=play-ng&id=FpaWzb&v=22
in above playground we can see that margin applied to ".allContacts .contact", ".contact .mobile" and ".contact .name" not working, all this classes is used inside ng-template.
other than that all the margin working as expected.
so it seems there is a problem inside ng-template for "margin"

[tsonevn]

Hi, @bhavincb,
I tested the project, however, was unable to recreate an issue with the margin. I have changed the margin to 50 as follow:

.allContacts .contact{
    margin: 50;
}

and the style was applied. The issue might be related to the live sync process. I would suggest to restart the application and to try again to build it with tns run <platform_name>.

[bhavincb]

hi @tsonevn ,
pardon me, it was my mistake , here is working sample project link.
https://play.nativescript.org/?template=play-ng&id=FpaWzb&v=25

in this plaground i had used below css

.allContacts .contact{
    margin: 1000;
}

play it with nativescript playground app , we can see margins not applied.

[tsonevn]

Hi, @bhavincb,
I reviewed the new project and was able to recreate the issue with the margin only on Android.
Regarding that, I would suggest as a temporary solution to set up the GridLayout inside a StackLayout, which will allow you to set up the needed margin. For example:

<ng-template let-i="item">
            <StackLayout>
            <GridLayout class="contact"  columns="auto,*" rows="auto,auto">
                <Image class="contactImage avatar" col="0" *ngIf="i<2" row="0" 
                 rowSpan="2" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>
                <StackLayout class="contactImageName avatar" *ngIf="i>1" col="0" rowSpan="2" width="100"
                 height="100">
                    <Label text="Bj"></Label>
                </StackLayout>
                <Label class="name" row="0"  col="1" text="Label"></Label>
                <Label class="mobile" row="1" col="1" text="Label2"></Label>
            </GridLayout>
            </StackLayout>
        </ng-template>