Ionic-framework: Wrong border-bottom of the last <ion-input> inside a <ion-list>

[Ivan-Perez]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
The last input on a form inside a <ion-list> shows at longer boder-bottom than the previous ones in Android.

Expected behavior:
All of them should be the same.

Steps to reproduce:

Use this page template to reproduce the issue:

<ion-header>
  <ion-navbar>
    <ion-title>Form test</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>First input</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Another input</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>One more input</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

You get something like the image below (highlighted what I'm referring to):

Related code:

https://stackblitz.com/edit/ionic-idg4tc - Check pages/home/home.html.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\Ivan.Perez\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.5.0

System:

    Node : v6.11.0
    npm  : 3.10.10
    OS   : Windows 7

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us!

This may or may not be intentional. I have labeled this with the "design decision" label because these types of things are going to be reviewed again in the near future.

Thank you for using Ionic

[Batur24]

it's a bit annoying, are there good methods for this?

[Beni90]

Guys, is there any solution for this? This is quite annoying!

[v1bh0r]

The material design specs clearly are against the observed behavior here https://material.io/guidelines/components/text-fields.html
Following are some screenshot from the specs documentation:

Unless there's a clear reason why this design decision was made, we should make this change based on the Material Design specs.

Found the related PR - https://github.com/ionic-team/ionic/pull/9679

[brandyscarney]

Fixed by https://github.com/ionic-team/ionic/commit/427222cc29d09cde42ea387e2f4c08921535fb86

[giovannipds]

Is there a way to quick fix this on an app using an Ionic older version?

[giovannipds]

Like this:

<ion-list>

  <ion-item>
    <ion-label floating>Email</ion-label>
    <ion-input required type="email"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input required type="password"></ion-input>
  </ion-item>

  <div hidden></div>

</ion-list>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.