Floated-Label vertikal in der Mitte eines Eingabeelements ausrichten Ionic

Question

Also, ich möchte keinen Platzhalter verwenden, stattdessen möchte ich Ionen-label wie Platzhalter verwenden. Ich muss vertikal ausrichten FLOATED Ion-Label in einem Ionen-Eingabeelement und wenn Benutzer klickt und/oder geben Sie den Text in Ionen-Eingabefeld Ion-Label sollte darüber bleiben.

Das ist, was ich bisher habe:

IONIC:

<ion-item> 
     <ion-label floating class="label__placeholder">SMS</ion-label> 
     <ion-input name="first_name" 
     type="text" 
     ngModel 
     required> 
     </ion-input> 
    </ion-item> 

SCSS:

ion-label { 
     font-family: 'Roboto', sans-serif; 
     font-size: 18px !important; 
     margin-bottom: 5px; 
     padding-left: 15px; 

     &.label__placeholder { 
     position: absolute; 
     bottom: 30px; 
     } 
    } 

Dies ist das Bild, wie es jetzt ist und wie Ion-label sollte wie folgt aussehen Wenn nicht auf Ioneneingabe geklickt wird:

Und das ist, wenn ich auf Ionen Eingang klicken, Ionen Label geht auf der Ionen Eingang, aber es ist nicht sichtbar:

Und das ist, wie es aus, wenn Ionen- aussehen sollte Eingang geklickt haben:

ich es geschafft, Ionen Label in der Mitte eines ionen Eingang zu positionieren, aber wenn ich auf Ionen Eingang klicken, Ionen Label geht auf dem Ionen Eingang und es ist nicht sichtbar, wie es irgendwo hinterher geht, weiß nicht wo. Versucht, Z-Index auch zu verwenden, aber es hat nicht geholfen.

Answer 1

Ich habe es geschafft, dieses Problem zu lösen. Ich entfernte Position: absolute und unten: 30px von & .label__placeholder und verwenden Sie stattdessen diesen Code und es funktioniert:

ion-label { 
     font-family: 'Roboto', sans-serif; 
     font-size: 18px !important; 
     padding-left: 15px; 
     &.label__placeholder { 
     font-size: 15px !important; 
     line-height: 13px; 
     margin-bottom: 0 !important; 
     } 
    } 

Hier ist, wie es jetzt aussieht, wenn Ionen Eingang nicht angeklickt wird und, wenn es: