nativescript-angular icon indicating copy to clipboard operation
nativescript-angular copied to clipboard

"margin" Not working inside ng-template with GridLayout

Open bhavincb opened this issue 6 years ago • 4 comments

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"

bhavincb avatar Mar 06 '18 19:03 bhavincb

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

tsonevn avatar Mar 07 '18 09:03 tsonevn

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.

bhavincb avatar Mar 07 '18 12:03 bhavincb

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>

tsonevn avatar Mar 08 '18 08:03 tsonevn

was this bug solved? I just new on nativescript and looks like still happening

femave avatar May 04 '23 16:05 femave