Ion-label 'floating' not working together with ion-label 'error'

Using Ionic 6.0.1, I find that slot=error and position=floating break the UI when used together. The problem is illustrated in this screen recording[1], produced with this code:

<ion-item>
  <ion-label position="floating">Username</ion-label>
  <ion-input formControlName="username"></ion-input>
  <ion-label *ngIf="f.username.errors?.minlength" slot="error">
     Username is too short</ion-label>
</ion-item>

[1] Dropbox - ion-label-floating-and-error-bug.mov - Simplify your life. Please ignore where the recording shows “login name” at the bottom. That is not relevant to the example, and so was not included in the code sample.

2 posts - 2 participants

Read full topic