CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
ir2pid
ir2pid

Reputation: 6126

Remove black baseline border bar from ion-item in ionic 3

How do I remove these black bars from my ion-items? All answers to similar questions aren’t working

enter image description here

my code, applied no-lines in all places still no luck

<ion-list no-lines>
    <ion-row padding-left margin-left no-lines>
      <ion-item no-lines padding align-self-center align-self-start>
        <ion-label floating color="light">{{ "EMAIL" | translate }}</ion-label>
        <ion-input clearInput type="email" [(ngModel)]="account.email"></ion-input>
      </ion-item>
    </ion-row>
  </ion-list>

Upvotes: 0

Views: 557

Answers (2)

AbdulAzeem
AbdulAzeem

Reputation: 529

In your scss file of that page add this :

.list-md .item-input:last-child{
   border-bottom : none
}

Upvotes: 2

Raul Sauco
Raul Sauco

Reputation: 2705

In Ionic 4 you have to use lines="none" is on the item documentation

<ion-list>
  <ion-row padding-left margin-left>
    <ion-item lines="none" padding align-self-center align-self-start>
      <ion-label floating color="light">{{ "EMAIL" | translate }}</ion-label>
      <ion-input clearInput type="email" [(ngModel)]="account.email"></ion-input>
    </ion-item>
  </ion-row>
</ion-list>

There are other options, like lines="inset" and lines="full", and also it will affect the style of the list elements differently if you apply it to the ion-list tag or to the ion-item themselves.

Upvotes: 3

Related Questions