Nativescript margin CSS being ignored


I am using NativeScript with Angular and have the below FlexboxLayout inside of a ScrollView. I have created some css classes like margin-bottom-five to add margin to some of the elements. This margin is being completely ignore inside the ScrollView though.

I assume it is the ScrollView causing this behavior because in another template with FlexboxLayout but without the ScrollView the margins work perfectly. How do I get it to use the margin I specified inside of the ScrollView?

<ActionBar class="action-bar">
    <NavigationButton (tap)="router.back()" android.systemIcon="ic_menu_back"></NavigationButton>
    <Label class="action-bar-title" text="Report"></Label>

<ScrollView orientation="vertical" class="page">
    <FlexboxLayout flexDirection="column" justifyContent="center" alignItems="center">
        <Label class="text-label margin-bottom-five" textWrap="true">
                <Span text="Testing"></Span>
        <GridLayout *ngFor="let item of items" columns="*,auto,auto,auto,*" rows="auto">
            <Label class="text-label lbl-size" text="{{}}" col="1" textAlignment="center"></Label>
            <Label class="text-label lbl-x-size" text="x" col="2" textAlignment="center"></Label>
            <Label class="text-label lbl-size" text="{{}}" col="3" textAlignment="center"></Label>

        <Button text="Start Over" (tap)="startOver()" class="btn btn-start-over btn-primary">


  margin-bottom: 5%;


i don’t think that percentage can work in here, try to change it to

margin-bottom: 5;

Answered By – Matan Shushan

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.