Divider below ion-avatar

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


I want it to become like this:


This is my html code for 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">
      <p><ion-icon name="call" item-start></ion-icon>+{{data.phone}}</p>

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

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

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

it worked! thanks for helping me out!

1 Like