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?
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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With