1

I know that I can remove the separating line in Ionic list by adding no-lines to the html ion-item, as already answered in this question.

My problem is that this removes the ability to have any of the borders (top, bottom, left, right). And in my particular problem, I need a top border of 2px above the ion-item.

Does anyone know any alternative way to remove the separating line that doesn't mess with the borders?

Duannx
  • 7,501
  • 1
  • 26
  • 59
Vodenjak
  • 806
  • 1
  • 13
  • 21

1 Answers1

2

This should do the trick :

Remove existing borders

<ion-list>
    <ion-item no-lines>item 1</ion-item>
    <ion-item no-lines>item 2</ion-item>
    <ion-item no-lines>item 3</ion-item>
</ion-list>

Add border-top

ion-item { 
    border-top: 2px solid black !important;
}
Antikhippe
  • 6,316
  • 2
  • 28
  • 43