Divider below ion-avatar

Ionic Framework ionic-v3
1

I’m trying to create contact list with avatar. My question is how can I make the list divider extend to its full width?

Problem

I want it to become like this:

Problem_1

This is my html code for list

<ion-list>
    <button ion-item detail-push text-wrap *ngFor="let data of filteredDrivers; let i = index" (click)="gotoDetails(i)" class="item-divider">
      <ion-avatar item-start  >
        <img src="../assets/imgs/person-icon.jpg">
      </ion-avatar>
      <h2>{{data.name}}</h2>
      <p><ion-icon name="call" item-start></ion-icon>+{{data.phone}}</p>
    </button>
  </ion-list>
2

Remove the default border and add your own, something like this:

.list > .item {
  border-bottom: 1px solid #dedede;

  > .item-inner {
    border-bottom: none;
  }
}
3

it worked! thanks for helping me out!

1 Like