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

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>

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

that worked for me. thanks :grinning:

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;
        }
    }

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

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

I think this avoids CSS:

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

but maybe does not exactly address your issue.