Ionic 2 list full width divider

user_7689896 0
Viewed 4877

I currently have a list on a Ionic 2 app, and the divider is full width only on the last element. Here is the result :

enter image description here

I'd like all the elements to be with a full width border. Couldn't find anything in the docs about this.. Thank you in advance for your help !

EDIT : Here is my code :

<ion-list no-padding="">
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap>
        <ion-thumbnail item-left>
            <img class="item item-thumbnail-left" [src]="like.logo">
        </ion-thumbnail>
        <h2>{{like.name}}</h2>
        <h3 class="establishment">{{like.type}}<br /></h3>
        <p class="establishment">{{like.city}}<br /></p>
        <!--<button ion-button clear item-right>View</button>-->
    </ion-item>
</ion-list>
ionic2 ionic3 angular typescript
3 Answers

I faced it on ionic 4 and following is my answer.

Html

 <ion-list lines="none">
    <ion-item class="bottom-border" *ngFor="..">
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
  </ion-list>

.scss

.bottom-border{
  border-bottom: 1px solid #e8e8e8;
}

Please make sure to use lines="none" to remove existing line

user_19483280 
/* V3: Full line under items having no-line */
.item-cover {
    border-bottom: 1px solid #dedede;
}
user_7509890
Related