Remove start and end border ionic-list tag in ionic 2
10,265
Solution 1
One way would be to add no-lines in the ion-list
element like this:
<ion-list no-lines>...</ion-list>
but that will remove the lines of the items too. So in order to remove only that line in 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;
}
Solution 2
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;
}
Author by
Yalamandarao
IOS & Xamarin Forms Application Developer. FB Page : https://www.facebook.com/IPhoneSdkForums/?ref=bookmarks
Updated on July 28, 2022Comments
-
Yalamandarao almost 2 years
Just want to remove the start and end border. I'm very new this programming language. I'm using below code for displaying 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 highlighted red color circle borderlines on below mentioned screen shots. How to do?
-
Vasanth almost 6 yearsIf you want to remove top border of ion-list in iOS, then answer of Ifeanyi Chukwu is correct.
-
Diogo Rodrigues over 5 yearsFor android devices you need replace '.list-ios' for '.list-md'