CODEWITHSUNDEEP
htmlcssionic-frameworkionic3ionic4
user12504785
user12504785

Reputation:

Ionic: Remove line under a field

Ionic is making line below after each field I am creating. how can I remove this line? What this line thing “officially” called? Is it removable by CSS?

My code:

<ion-grid style="height: 100%;" class="something-semantic">

  <ion-row class="something-else-semantic">

    <ion-col size-md="6" offset-md="3" class="something-semantic">

      <ion-card style="height: 100%;" class="something-else-semantic">

        <ion-card-header>

          <ion-card-title>

          </ion-card-title>

        </ion-card-header>

        <ion-card-content>

          <ion-item>

            <ion-thumbnail slot="start">

              <!-- <ion-img [src]="../../assets/logos/logo1.png"></ion-img> -->

              <img src="../../assets/logos/logo1.png">

            </ion-thumbnail>

            <ion-text style="color:#7fba00; font-weight: bolder; ">Cool Website</ion-text>

          </ion-item>

          <ion-item>

            <ion-text>Sign in</ion-text>

          </ion-item>

          <ion-item hidden>

            <ion-text style="color: red;">

              Account doesn't exist. Enter a different account or <a>get a new one.</a>

            </ion-text>

          </ion-item>

          <ion-item>

            <ion-input placeholder="Email or Username"></ion-input>

          </ion-item>

          <ion-item>

            <ion-text> Don't have an account? <a>Sign up</a> </ion-text>

          </ion-item>

          <div class="ion-margin-vertical ion-text-center">

            <ion-button fill="solid" expand="block" color="secondary" size="small"

              style="text-transform: none; width:auto;">Next</ion-button>

          </div>

        </ion-card-content>

      </ion-card>

    </ion-col>

  </ion-row>

</ion-grid>

Here is what it looks like, I want to remove the lines

enter image description here

A second question is : why image is working when using relative path and normal html image tag, but not working when using ion image tag? [ see my code ]

Upvotes: 1

Views: 1515

Answers (1)

Athif Shaffy
Athif Shaffy

Reputation: 722

If you are using ionic 4, You need to do lines="none" on the ion-item tag like so

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

(in case you are using older version, try no-lines instead)

Upvotes: 4

Related Questions