CODEWITHSUNDEEP
htmlcssionic3
Vodenjak
Vodenjak

Reputation: 813

How to remove separating line in Ionic 3 but keeping the ability to show borders?

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?

Upvotes: 1

Views: 696

Answers (1)

Antikhippe
Antikhippe

Reputation: 6685

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;
}

Upvotes: 2

Related Questions