How to fix Ionic floating label with border input

Ionic Framework ionic-v3
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.

image
image933×108 5.78 KB

5

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

1 Like
7

can you give me a example

8

@yeshwanthmn Hey any update on this? Looking for the same design! anything will help :slight_smile: