How to make listview seperator line full width on iOS platform?


#1

Listview’s seperator line seems having a left margin on iOS , how to make it full width ? thank you !
Maybe few lines of code could achieve it , rather than hiding the line by setting seperator color same as background, and simulate it by some tricks ?


#2

That is the default behavior on iOS and not Nativescript specific. I don’t have an answer as to how you would override that because I tend to try to stick with platform defaults whenever possible for user familiarity.


#3

I haven’t tried with the default ListView, but with the RadListView from the (free) Telerik UI for NativeScript suite you can have a full-width separator line like this:

    <ng-template tkListItemTemplate let-item="item">
      <StackLayout>
        <your-content></your-content>
        <!-- the sep. line -->
        <StackLayout height="1px" backgroundColor="#E2E6EB"></StackLayout>
      </StackLayout>
    </ng-template>

#4

Thanks , I will give a try ! I am using the default list view now


#5

Here is how I do it. Not sure if this is the best way but it certainly works.

    if (Platform.isIOS) {
        var listView = page.getViewById('listView');

        listView.on(listViewModule.ListView.itemLoadingEvent, function (args) {
            args.ios.separatorInset = UIEdgeInsetsZero;
        });
    }

#6

thank you very much @3rror404


#7

Easiest way I’ve found is to set the ListViews separator color to transparent separatorColor=“transparent” then add in my own bottom border in css…