Ionic input with floating label buggy problem!

Ionic Framework ionic-v3
1

Hi Guys. I have a problem. I am struggling to implement floating label with ion input component. But every time I test on google chrome browser. I see some bugs.

02

this is what I see. I want to clear default values of ion input tags. But ı cannot do that. Here is my code.

<ion-item>
  <ion-label floating>Kullanıcı Adı</ion-label>
  <ion-input [(ngModel)]="username" type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Şifre</ion-label>
  <ion-input  [(ngModel)]="password" type="password"></ion-input>
</ion-item>

<ion-item no-lines margin-top>
  <ion-checkbox color="teal" ></ion-checkbox>
  <ion-label>Beni Hatırla</ion-label>
</ion-item>

What is wrong on this?

Thanks. Sorry for my english.

2

is there anybody here to help to me? :frowning:

3

What does this mean?

4

This is not the default value. Floating means that the label is big and float to the top when the input is focused.

I think you woud use stacked. Im not sure if staked the right word take a look in the doc.

5

every time the app is opened, I see first ion input tag value “a” , the second ion input value “1”. Therefore floating animation is not working. So user needs to delete these values and focus to see animation. Also, be careful ion label ‘şifre’ and ion input (password) overlayed each other.

6

You have two-way [(ngModel)] binding, so the input fields should reflect whatever you have assigned to the backing property.

7

if this is not a default value, why am i seeing value ‘a’ in the first input tag and value ‘1’ in the second input tag? Every time the app is opened, these values are set by the ionic. Also I want to remove this yellow background as you can see in the picture above.

8

I tried this before. I created username and password variables as empty string on my class and I binded this values to ion input tags. But still I saw same result. Look at my code. What is wrong this? I cannot understand…

9

Sorry I understand your first post wrong. I thought you typed the a in the first input.

The code is ok, so the problem must be elswhere. Have you tried it in an other browser?

1 Like
10

I tried to open my app on Safari. It seems everything fine. Thanks for this idea.

11

I have the same issue. But it is not working even on my IonicDevApp. Did someone solve this problem?

12

I think it’s your browser’s autofill function. The browser detected the form tag and you told to save the credidentals. Somehow, when the browser fills the Inputs, Label animations don’t work.