How to remove item-inner border in ionic

Question

      <ion-item  color="transparent" padding="0px">
        <ion-input type="email" placeholder="username"></ion-input>

      </ion-item>

      <ion-item color="transparent" padding="0px" no-lines>
        <ion-input  id="password" type="password"  placeholder="Password"></ion-input>
        <ion-icon name="albums"></ion-icon>
      </ion-item>

I'm creating a login form in ionic. But I have a problem that I want to a bottom white border in item-inner. My CSS is not working, Plz if you have any suggestions give me.....Thanks

you want to white border in between two item or remove existing border — Utpaul, Apr 23 '19 at 06:23

score 9 · Answer 1 · answered Jul 11 '20 at 14:19

The following is my solution, not sure whether it is work for all the cases, but at least for my project it is working.

SOLUTION: add lines="none" to the ion-item tag.

<ion-item style="--background: transparent;" lines="none">
    <ion-avatar  style="width: 60px;height: 60px;" slot="end" >
        <ion-img [src]="displayProfilePic" style="width: 100%" ></ion-img>
    </ion-avatar>
</ion-item>

REFERENCE: https://ionicframework.com/docs/api/list

NOTE: It also working for ion-list.

Mohan Gopi · Answer 2 · 2019-04-23T06:59:14.513

5

try this

<ion-item lines="none" class="remove_inner_bottom"> //here is the border bottom removal code
    <ion-label>
      No Lines Item
    </ion-label>
  </ion-item>

The above code does not have border bottom

inside your css

.remove_inner_bottom{
   --inner-border-width: 0; // this removes the inner border width
}

Please find the link for applying sass for ion-item

edited Apr 23 '19 at 06:59

answered Apr 23 '19 at 06:43

Mohan Gopi

7,606
17
66
117

score 0 · Answer 3 · answered Apr 23 '19 at 06:27

Try it:

<ion-list lines="none">
      <ion-item  color="transparent" padding="0px">
        <ion-input type="email" placeholder="username"></ion-input>

      </ion-item>

      <ion-item color="transparent" padding="0px" no-lines>
        <ion-input  id="password" type="password"  placeholder="Password"></ion-input>
        <ion-icon name="albums"></ion-icon>
      </ion-item>
</ion-list>

OR

.item-inner{
  border-style: unset !important;
}

How to remove item-inner border in ionic

3 Answers3