Ionic 2 <ion-input> shows two inputs instead of one on iPhone

Ionic Framework ionic-v3
1

Hi everybody
I have faced with next issue:
When I simulate my application for iPhone (iOS from 8.3 to 9.3), I see next problem:
image

My code is:
`<form class=“list” [formGroup]=“loginUserForm” (ngSubmit)=“submit()”>

Username



Password


Login

`

Maybe somebody knows how to fix it? Exсept change on

2

@ana_ya did you resolve this? I’ve run into the same issue.

3

Yes, I solved it. I made my style (CSS-class) and implement for all inputs. In iOs devices we have the hidden inputs like these on picture (little inputs). That is why I changed the implementation Css-class and did it only for needed inputs.

4

I’m sorry I’m not quite understanding you. Can you give me an example?

5

What I had in first case (“I made my style (CSS-class) and implement for all inputs”):
input{ background: white; padding: 15px; border-radius: 5px; border: 1px solid #c8c7cc ; margin: 0; }
After fixed I have the CSS-class for needed inputs (“I changed the implementation Css-class and did it only for needed inputs”):
.text-input{ background: white; padding: 10px; border-radius: 5px; border: 1px solid #c8c7cc ; margin: 0; }

6

oh ok. thanks. I’ll try it out. I appreciate your help.

7

welcome. I hope it will help you (if reason of it)

1 Like
8

It helped! Thanks it worked and my screens are working properly.