About Ionic 8 Input floating label trouble

Ionic Framework Ionic Angular
1

Hello pals.

I have this login form:

<div style="top: 0px; height: 50px; background-color: #ffc409; text-align: center;">
  <h3> Autentíquese para continuar </h3>
</div>

<div id="pager">
  <div id="container" class="main_container">
    <img src="../../../assets/icon/LoginFarmaGestor.png" alt="" height="100px"><br>
    <ion-list>
      <ion-item id="user">
        <ion-label position="floating">Usuario (correo):</ion-label>
        <ion-input type="email" [value]="user" (ionChange)="onUserChanged($event)"></ion-input>
      </ion-item>
      <ion-item id="pass">
        <ion-label position="floating">Contraseña:</ion-label>
        <div id="pass_container">
          <ion-input id="pass_input" [type]="!showPassword?'password':'text'" [value]="password" (ionChange)="onPassChanged($event)"
            #Pass show
          ></ion-input>
          <a class="type-toggle" (click)="toggleShow()" style="color: orangered;">
            <ion-icon class="show-option" *ngIf="showPassword" name="eye-off-outline"></ion-icon>
            <ion-icon class="hide-option" *ngIf="!showPassword" name="eye-outline"></ion-icon>
          </a>
        </div>
      </ion-item>
      <ion-item>
        <ion-button expand="full" color="success" (click)="doLogin()"
          [disabled]="!user || !password"
        >Entrar</ion-button>
      </ion-item>
      <ion-item>
        <ion-button expand="full" color="warning" (click)="doRegister()">
          Registrar
        </ion-button>
      </ion-item>
      <ion-item>
        <ion-label class="link" style="color: orangered;" (click)="doForgetPass()">¿Olvidaste tu contraseña?</ion-label>
      </ion-item>
    </ion-list>
  </div>
</div>

I have an app made on Ionic 6. This project have the follow dependencies:

"dependencies": { "@angular/animations": "^17.0.2", "@angular/common": "^17.0.2", "@angular/compiler": "^17.0.2", "@angular/core": "^17.0.2", "@angular/forms": "^17.0.2", "@angular/platform-browser": "^17.0.2", "@angular/platform-browser-dynamic": "^17.0.2", "@angular/router": "^17.0.2", "@awesome-cordova-plugins/core": "^6.7.0", "@awesome-cordova-plugins/speech-recognition": "^6.7.0", "@capacitor/android": "6.0.0", "@capacitor/app": "6.0.0", "@capacitor/camera": "^6.0.0", "@capacitor/core": "6.0.0", "@capacitor/device": "^6.0.0", "@capacitor/geolocation": "^6.0.0", "@capacitor/haptics": "6.0.0", "@capacitor/ios": "6.0.0", "@capacitor/keyboard": "6.0.0", "@capacitor/network": "^6.0.0", "@capacitor/preferences": "^6.0.0", "@capacitor/screen-orientation": "^6.0.0", "@capacitor/status-bar": "6.0.0", "@ionic-native/core": "^5.36.0", "@ionic/angular": "^8.0.0", "@ionic/pwa-elements": "^3.3.0", "@types/hammerjs": "^2.0.45", "animate.css": "^4.1.1", "axios": "^1.7.2", "capacitor-biometric-auth": "^0.1.1", "chart.js": "^4.4.3", "cordova-plugin-speechrecognition": "^1.2.0", "crypto-js": "^4.2.0", "currencies.json": "^1.0.2", "encriptorjs": "^1.0.2", "es6-promise-plugin": "^4.2.2", "hammerjs": "^2.0.8", "ionicons": "^7.0.0", "moment": "^2.30.1", "ngx-photo-editor": "^0.4.4", "oodles-ngx-photo-editor": "^0.4.4", "qr-scanner": "^1.4.2", "qrcode": "^1.5.3", "rxjs": "~7.8.0", "swiper": "^11.1.3", "tslib": "^2.3.0", "zone.js": "~0.14.2" },

and my login form looks like this:
imagen

While I’m trying to update my app to Ionic 8; I obtained this results:
imagen

It is the same html and css code. The fail is that floating labels was drawn with big font size instead the floating short.

Has someone have the same issue over here?

2

As you can see here ion-input docs now it’s just

<ion-item>
  <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
</ion-item>

No ion-label needed anymore.