[Ionic V4]How to remove last-child bottom border of ion-item in Ionic4

Ionic Framework ionic-v3
1

For Ionic V4,
how do you remove end line of last child of ion-items using css?
No scripts please!

In this case, when advanceOpts is true, last item is Item4, else Item2.
In other cases, any one may be the last item, using CSS is quick and flexible, because browser optimize the render, that’s why people in stackoverflow ask for CSS solution.
Now, with Ionic V4 component, I have no idea to do such kind of easy thing.

<ion-button (click)="advanceOpts=!advanceOpts;">

<ion-list>
  <ion-item>
    <ion-label>Item1</ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Item2</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>
  <ion-item *ngIf="advanceOpts">
    <ion-label>Item3</ion-label>
    <ion-radio slot="end"></ion-radio>
  </ion-item>
  <ion-item *ngIf="advanceOpts">
    <ion-label>Item4</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-list>
2

Hello @avex

You can do that in the scss file of your page/component.

ion-item:last-child {
    --border-width: 0 0 0 0 !important;
}

Based on :https://www.youtube.com/watch?v=_D1lCoYzivA

I hope it helps you

1 Like
3

that worked for me. thanks :grinning:

4

no, that doesn’t help.
maybe it does matter with the content of ion-item. I miss ion-icon

  <ion-item *ngIf="advanceOpts">
    <ion-icon name="ios-pricetag" slot="start"></ion-icon>
    <ion-label>Item4</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>

And I used css below before :

    ion-item:last-child {   
        .item-inner {
            border-bottom: 0px;
        }
    }
5

People who use slot in front of item, --inner-border-width can solve your problem.

ion-item:last-child {
  --inner-border-width: 0;
}
15 Likes
6

I think this avoids CSS:

<ion-item lines="none">
        ...
</ion-item>

but maybe does not exactly address your issue.

3 Likes
7

That’s helped thank You

8

this is my solution , it works for me , i use ionic 4

<ion-list class="no-last-border">...</ion-list>

and in css i use below :

ion-list.no-last-border {
  :last-child {
    --border-style: none !important;
  }
}```
3 Likes
11

working on ionic 5 :slight_smile:

12

Works on Ionic 5, thank you very much

13

why not use just <ion-item lines="none">......</ion-item>

14

Thankyou, for neat solution :slight_smile:

15

this worked in ionic v6