CODEWITHSUNDEEP
listviewnativescriptangular2-nativescriptabsolutelayout
trees_are_great
trees_are_great

Reputation: 3911

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>

Upvotes: 1

Views: 873

Answers (1)

trees_are_great
trees_are_great

Reputation: 3911

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>

Upvotes: 1

Related Questions