How to fix Ionic floating label with border input

#1

I need to make (ion-label floating) same like below screenshot in my ionic4 project.
please advice me.
Floating%20label

Here is the link what i am looking
https://www.freakyjolly.com/gmail-login-input-field-style/
This is my current code

<ion-item>
    <ion-label position="floating">Floating Label</ion-label>
    <ion-input formControlName="password" id="password" type="password"></ion-input>
  </ion-item>
#2

image
Looking same as it is.

#3

You can get the input is on/out focus by this code.

<ion-input (ionBlur)="inputBlur()" (ionFocus)="inputFocus()"></ion-input>
#4

Getting this error.

#5

You need to have those functions defined in your component code.

1 Like