Nativescript Listview boarder lines

Question

Is it possible to increase the size of the boarder lines in a Listview? For instance, i have a list and i want have a boarder to seperate each item of the list. Just wondering if there is a way to do that.

        <ListView [items]="dataList">
                <ng-template let-item="item">
                    <GridLayout class="list-group-item" columns="*,auto">
                       <Label col ="0"  class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" ></Label>

                    </GridLayout>
                </ng-template>
                </ListView>

Answer 1

You could remove the default Listview separator by adding this to your css

ListView {
  separator-color: transparent;
}

and add your own border to each individual cells by adding the border to the class associated with that cell

.list-group-item {
  border-color: #000;
  border-width: 2;  
}

You could also just add a border bottom to each cell except the last one if needed, by modifying the html slightly (adding a conditional class on the GridLayout)

<ListView [items]="dataList">
  <ng-template let-item="item" let-i="index">
    <GridLayout class="list-group-item" [class.with-border-bottom]="i < dataList.length - 1" columns="*,auto">
      <Label col ="0"  class="confederacy" [nsRouterLink]="['/province', item.confederancy_name]" ></Label>
    </GridLayout>
  </ng-template>
</ListView>

.with-border-bottom {
  border-bottom-color: #000;
  border-bottom-width: 2;
}