Ionic 2 floating ion-labels issue

I'm having an issue with some of the floating labels I'm using, not all of them, which makes it even stranger. As far as I can see my ion-items are written exactly the same. Here are some pictures to show you the issue. I'm not sure whether this is a bug in Ionic 2 or I'm doing something wrong. If there's anything unclear or you need more code, feel free to ask.

As you can see, the description and photo/video label are already acting like they should when they're in focus(they're not) but it's not displaying the highlights.

Here is an image where I put it in focus and then out of focus again. Once I do that it works correctly.

Here is the html I wrote.

    <ion-content padding>      <form [formGroup]="complaint" (ngSubmit)="send()">     <ion-item>       <ion-label floating>Description*</ion-label>       <ion-textarea [(ngModel)]="description" type="text" formControlName="description"></ion-textarea>     </ion-item>     <ion-item>       <ion-label floating>Number of completed tests*</ion-label>       <ion-input [(ngModel)]="nrTests" type="number" formControlName="nrTests"></ion-input>     </ion-item>     <ion-item>       <ion-label floating>Photo/Video</ion-label>       <ion-input [(ngModel)]="media" formControlName="media"></ion-input>     </ion-item>     <button ion-button type="submit" [disabled]="!complaint.valid">Send</button>    </form> </ion-content> 

2 Answers

Answers 1

Remove floating and then try. I think this will resolve your issue.

Answers 2

Use stacked attribute to the ionic label and use the ion-item with in the ion-list.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati