CSS: Weird left margin in ion-input on Android

[peterpeterparker]

Hi,

With Ionic2, on Android, at least when using Crosswalk, when I select an ion-input a weird left-margin (sometimes even just a half sized left-margin) gonna be displayed. This doesn't happens neither while debugging with Chrome or on iOS. Could that glitch be a bug?

Test code:

 <ion-grid>
     <ion-row>
        <ion-col width-100>
          <ion-item>
            <ion-icon name="pin" item-left></ion-icon>
            <ion-input type="text" placeholder="Test"></ion-input>
          </ion-item>
   </ion-col>
 </ion-row>

 <ion-row>
        <ion-col width-100>
          <ion-list>
            <ion-item>
              <ion-icon name="pin" item-left></ion-icon>
              <ion-input type="text" placeholder="Test"></ion-input>
       </ion-item>
     </ion-list>
   </ion-col>
 </ion-row>
 </ion-grid>

Thx in advance for having a look.

P.S.: Follow up of https://forum.ionicframework.com/t/ion-item-question-and-weird-android-css/62754

P.P.S.: Even without ion-grid the same effect happens. To reproduce the problem I also cleared all my custom css and could reproduce it only with the native css I use.

[jgw96]

Hello, thanks for using Ionic! Does this also happen when not using crosswalk on an android device or emulator running 5.0 and higher?

[peterpeterparker]

Yes, just tested both cases, with or without Crosswalk this happens on my Nexus 5X / Android 6 device.

[peterpeterparker]

Ummm in my project, seems I solved the issue. Don't know exactly how.

I've got these input inside a slider and it seems that fixing the overflow of that slider fixed it, but not sure.

Well then in my project seems to be solved, so I don't mind of course if you want to close the task, even with the native css I think I still could reproduce it.

[jgw96]

@peterpeterparker thanks for the info. I was actually going to get back to you and let you know that on my devices (Nexus 6 running Android 7.0, Nexus 7 running Android 6.0.1, and a Moto X running 5.1.1) I cannot reproduce this issue. Because of this and the fact that you seemed to solve the issue in your app I am going to be closing this issue for now. Thanks for using Ionic!

[peterpeterparker]

@jgw96 thx for the feedback and sorry for time lost

[kamok]

@jgw96

I have this problem for Android 5, NOT 6. Using Crosswalk and without crosswalk is the same for Android 5. The line only occurs when the input is dirty. And it persists if the label is floating.

Below is my template:

    <form [formGroup]="loginForm" (ngSubmit)="logIn()">
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input type="text" formControlName="username" id="username-field"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" formControlName="password" id="password-field"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Username</ion-label>
        <ion-input type="text" formControlName="username" id="username-field"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label inline>Password</ion-label>
        <ion-input type="password" formControlName="password" id="password-field"></ion-input>
      </ion-item>
   </form>

I just duped the username and password field, replacing it with different label types. So, the first one will give a persisting line around the left and right edge of the div. The remaining label types will only show the line on first selection, then after 1 second or so it disappears. So it's onselect.

For me, I'll stay the hell away from floating and switch to something else. Hope this helps your team fix it.

[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.