Search code examples
listviewnativescriptangular2-nativescriptabsolutelayout

Nativescript 3 + angular 2: Listview or absolute layout margin not taking effect


As you can see, I've tried adding properties, such as 'marginBottom', but these take no effect. I want there to be more space between the items in the list. How would I best go about doing this?

<ListView [items]="data" class="small-spacing">
  <ng-template let-item="item" class="small-spacing" marginBottom="20">
      <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)">
          <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image>
          <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label>
          <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label>
          <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label>
      </AbsoluteLayout>
  </ng-template>
</ListView>

Solution

  • The solution I found was to use a stackLayout within the ng-template. The marginBottom and marginTop properties then position the elements correctly within the StackLayout.

    <ListView [items]="data" class="small-spacing">
      <ng-template let-item="item" class="small-spacing"  style="margin-bottom: 20;">
            <StackLayout class="itemTemplateStackLayout" orientation="vertical">
                <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" marginTop="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)">
                    <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image>
                    <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label>
                    <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label>
                    <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label>
                </AbsoluteLayout>
            </StackLayout>
      </ng-template>
    </ListView>