Label (floating) returns to placeholding position when input not active

Ionic Framework
1

hi. I’m trying to override the placement of the label when input is focused

this is what I tried to do:

  1. created the basic layout for input with a label in an item
  2. changed the height that the floating animation was set to (they use a transition translation method)
  3. override successful! (moves as I wanted it to) but now when the input is not active the label returns to the original placeholding position and removes my personal :focus even when there is valid text in the input

this the html layout:

<ion-item class="form-Item">
                        <ion-label for="name" position="floating" >Name:</ion-label> 
                        <ion-input formControlName="name" type="text" class="form-input" required id="name" placeholder=" ">

                        </ion-input>
                     </ion-item>

this is scss layout:

ion-item:focus-within:not(#selectItem) ion-label:not(#ion-sel-0-lbl):not(#ion-tg-0-lbl){
        transform: translateY(0%) translateX(-7px) scale(0.8) !important;
        transition-duration: .2s;
}

ion-label {
    padding-left: 10px;
    &:not(#ion-sel-0-lbl):not(#ion-tg-0-lbl){ 
        transform: translateY(175%) !important;
    }
}

this is a screenshot of the input with text input “text input” and the label called “name”

image

image

is this a restriction of ionic or am I doing something wrong?

2

Try out Version 5.6.0 which was released yesterday.

From Changelog:

label: only show placeholder with floating label when focused