Nativescript: ListView separatorColor="transparent" doesn't delete separator on Android

Created on 6 Feb 2019  路  6Comments  路  Source: NativeScript/NativeScript

Environment

  • CLI: 5.1.1
  • Cross-platform modules: 5.1.0
  • Android Runtime: 5.1.0
  • iOS Runtime: 5.1.0
  • Plugin(s): nativescript-ui-listview: 5.0.1

Describe the bug
ListView separatorColor="transparent" doesn't delete separator on Android (Pixel 2XL) but works fine on iOS (iPhone X)

To Reproduce
Just run the sample project

Expected behavior
No separator between ListView items

Sample project
Playground

Additional context
Screenshot from iOS:
img_bbe3fb7527bd-1
Screenshot from Android:
screenshot_20190206-142113


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

bug list-view android vue

Most helpful comment

Still an issue in {N} core in iOS but its intermittent; have also tried forcing that with CSS ListView { separator-color: white; }but every so often the separator turns up (sorry I haven't been able to find a pattern).

CLI: 5.2.4
tns-core-modules: 5.2.2
iOS Runtime: 5.2.0
Plugin(s): nativescript-ui-listview: 6.0.0

All 6 comments

The issue seems to be reproducible only in Vue based project.

Still an issue in {N} core in iOS but its intermittent; have also tried forcing that with CSS ListView { separator-color: white; }but every so often the separator turns up (sorry I haven't been able to find a pattern).

CLI: 5.2.4
tns-core-modules: 5.2.2
iOS Runtime: 5.2.0
Plugin(s): nativescript-ui-listview: 6.0.0

Its not just in vue. I'm facing the same issue in my vanilla js project with {N}6

I've tried to apply android:listSelector="@android:color/transparent" and separatorColor="transparent" to my ListView but nothing changed.
Also tried programmatically add this.yourListView.nativeElement.setDivider(null); but it breaks the list.

nativescript-ui-listview: 8.2.0

If you apply a background to the items, the separator shows even if it's set to transparent, because it's a gap between the items and not actually a colored line. To confirm this, move style="background-color: red" to the ListView, and the gaps will no longer be visible. https://play.nativescript.org/?template=play-vue&id=hj3162

Alright, I have figured out what my problem is. After I have installed RadDataForm component into my nativescript app, the separators lines are always visible on any ListView. If I remove RadDataForm any workaround on ListView works.

Really I don't understand what is going on. Seems RadDataForm rewrite ListView styles...

Was this page helpful?
0 / 5 - 0 ratings