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

[DennisSmolek]

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.

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

[jgw96]

Thanks, we will take a look into this.

[jeson114]

+1 ,got the same issue

[jeson114]

is this fixed ?

[DennisSmolek]

@jeson114 Not that I've seen

[iget-master]

Same issue here, @jgw96 the issue have almost 2 months with no fixes, looks a simple css adjustment!

[iget-master]

The issue can be fixed by updating the css that @DennisSmolek mentioned to this:

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

I've never contributed to this project, so I could not found yet where is the scss that defines this rule.

[iget-master]

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

[lsoaresesilva]

+1

[oknotok97]

+1, same issue here!

[airstep]

+1

[yaikhomba]

+1

[glennlawyer]

+1

[LiveLikeCounter]

+1
@Ionic, please fix this issue

[xinbenlv]

+1

[waterkamp]

+1

[reyco1]

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

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

[danielsotopino]

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">

[dsgriffin]

The above solutions do not work when you're using FormBuilder and their validation colour changes, in which case the following should work:

.card-md .item-md.item-block:not(:last-child) .item-inner,
.card-ios .item-ios.item-block:not(:last-child) .item-inner {
    box-shadow: inset 0 -1px 0 0 #dedede;
    border-bottom-color: #dedede !important;
}

Would appreciate an official fix for this though.

[musou1500]

any news? I think fix it from userland is not easy.
I will need to overwrite property value carefully according to text-input-md-show-focus-highlight and other some variables.

[samyfrii]

None of these work for me. At most it woks for the first time and once you reload after a modification, it stops working. I hope it will work on android.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/218