Geek Answers Handbook

Delete the start and end border of the ion list in ion 2

Just want to remove the start and end border. I am very new to this programming language. I am using the code below to display a list.

<ion-content> <ion-list class="item"> <ion-item href="#"> Hello! </ion-item> <ion-item href="#"> Hello2 </ion-item> </ion-list> </ion-content>

I need to remove the highlighted red borders of the color circle in the screenshots below. How to make? enter image description here

+8
source share
3 answers

One way is to add lines to the ion-list element as follows:

 <ion-list no-lines>...</ion-list>

but it will also delete the item lines. Therefore, to remove only this line at the bottom, you can add this style rule:

 .md ion-list > .item:last-child, .md ion-list > .item-wrapper:last-child .item, .wp ion-list > .item:last-child, .wp ion-list > .item-wrapper:last-child .item, .ios ion-list > .item:last-child, .ios ion-list > .item-wrapper:last-child .item { border-bottom: none; }
+18
source

The solution that worked for me was

 .list-ios>.item-block:first-child { border-top: none; } .list-ios>.item-block:last-child { border-bottom: none; }

As mentioned in the comments, below is the Android version

 .list-md>.item-block:first-child { border-top: none; } .list-md>.item-block:last-child { border-bottom: none; }
+8
source

@Ifeanyi Chukwu answer does it all.

The solution that worked for me was

 .list-ios>.item-block:first-child { border-top: none; } .list-ios>.item-block:last-child { border-bottom: none; }

As mentioned in the comments, below is the Android version

 .list-md>.item-block:first-child { border-top: none; } .list-md>.item-block:last-child { border-bottom: none; }
0
source

More articles:


All Articles