Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove start and end border ionic-list tag in ionic 2

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? enter image description here

like image 627
Yalamandarao Avatar asked Aug 02 '16 16:08

Yalamandarao


2 Answers

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;
}
like image 120
sebaferreras Avatar answered Sep 29 '22 19:09

sebaferreras


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;
}
like image 39
Ifeanyi Chukwu Avatar answered Sep 29 '22 18:09

Ifeanyi Chukwu