CODEWITHSUNDEEP
angularionic-framework
Suroko
Suroko

Reputation: 105

Remove divider of last item / chid in <ion-list>

When using <ion-list>, how can i set that the last item to not show a divider?

I have a list which has 2 *ng-For going through 2 arrays. The first array holds other arrays as elements.

The divider between elements of the first array are working alright. However, when the second array gets displayed, the last item also has a divider.

Setting the no-lines attribute removes all dividers between items, but i just want to remove the divider of the last one.

How the last item currently is displayed:

enter image description here

This is the desired result:

enter image description here

I already tried applying 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;
}

EDIT

Here is my current code:

list.html

 <ion-list>
    <ion-item *ngFor="let obj of TestObject.charListArray">
      {{obj.variable}}

      <ion-item *ngFor="let person of obj.contactArray">
        {{person.lastname}}, {{person.firstname}} <br> 
        {{person.email}} <br>
        {{person.company}}
      </ion-item>

    </ion-item>
   </ion-list>

Class of testobject:

import { charSection } from '../home/charSection';
import { compactContact } from '../home/compactContact';

export class charList {
  charListArray: Array<charSection>;
  alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  chars = this.alphabet.split("");

  //Generates 26 charSection-Objects in this array
  constructor() {
    this.charListArray = [];
    for (let i in this.chars) {
      this.charListArray.push(new charSection(this.chars[i]));
    }
  }

CharSection-class:

import { compactContact } from '../home/compactContact';

export class charSection {
  contactArray: Array<compactContact>;

  constructor(public char: string) {
    this.contactArray = [];
  }

Upvotes: 1

Views: 947

Answers (1)

bachonk
bachonk

Reputation: 3954

You were pretty close. This worked for me:

ion-item:last-child {
    --border-width: 0;
    --border-color: transparent;
}

Upvotes: 2

Related Questions