ionic-framework: Input field underline missing when inside ion-card

**Ionic version: 3.2.1

**I’m submitting a Bug Report

Current behavior: When I put an <ion-input> inside an <ion-card> The bottom border that acts as an underline is being overwritten with some core css found here when using the md or default modes.

.card-md .item-md.item-block .item-inner {
  border: 0;
}

The password field has a border but only because it is also the last child of a list. screen shot 2017-05-12 at 4 17 29 pm

Code to produce:

<ion-card class="contentBox">
            <ion-card-header>
              <h3>Login</h3>
            </ion-card-header>
            <ion-card-content>
            <ion-list>
              <ion-item>
                <ion-label floating>Email</ion-label>
                <ion-input type="email"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label floating>Password</ion-label>
                <ion-input type="password"></ion-input>
              </ion-item>
            </ion-list>
            </ion-card-content>
</ion-card> <!-- contentBox -->

Expected behavior: Should leave the underline intact Plunker: http://plnkr.co/edit/hSbLqd?p=preview

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 22 (1 by maintainers)

Commits related to this issue

Fixes #11640 — committed to iget-master/ionic by iget-master 7 years ago
ionic bug fix: ionic-team/ionic#11640 — committed to szamocza/jsonforms by deleted user 3 years ago
ionic bug fix: ionic-team/ionic#11640 code cleaning — committed to szamocza/jsonforms by deleted user 3 years ago
ionic bug fix: ionic-team/ionic#11640 code cleaning — committed to szamocza/jsonforms by deleted user 3 years ago
ionic bug fix: ionic-team/ionic#11640 — committed to szamocza/jsonforms by deleted user 3 years ago

Most upvoted comments

While ionic-team doesn’t fix it, the following rules could be added to your app.scss to fix it:

//@todo: Remove after Issue ionic-team/ionic#11640 is fixed
.card-md .item-md.item-block:not(:last-child) .item-inner {
  border-bottom: 1px solid #dedede;
}

.card-md .item-md.item-block:not(.item-input):not(.item-select):not(.item-radio):not(.item-checkbox) .item-inner {
  border: 0;
}

+14

iget-master on Jul 3, 2017

This worked for me. I just placed it in my page’s scss file:

.card-md .item-inner { border-bottom: 1px solid #dedede !important; }

reyco1 on Dec 28, 2017

With @reyco1 solution did this to enable the bottom border on some inputs

.enableBottomBorder {
  .item-inner { border-bottom: 1px solid #dedede !important; }
}
<ion-item class="enableBottomBorder">

danielsotopino on Jan 11, 2018