CODEWITHSUNDEEP
angulartypescriptionic2ionic3
saperlipopette
saperlipopette

Reputation: 1693

Ionic 2 list full width divider

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>

Upvotes: 3

Views: 4928

Answers (3)

RaSor
RaSor

Reputation: 877

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

Upvotes: 0

Janith Widarshana
Janith Widarshana

Reputation: 3483

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

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

You can do that by using the no-lines attribute (in order to hide the borders without the full width) and add a custom style rule to add the border in those items. Please take a look at this plunker.

So in your view:

  <ion-list>
      <ion-item no-lines class="bottom-border" *ngFor="..">
          ...
      </ion-item>
  </ion-list>

And then in the .scss file:

.item[no-lines].bottom-border { 
    border-bottom: 1px solid grey; 
}

Upvotes: 8

Related Questions