Ion-label and ion-input placeholder both merge

Ionic Framework ionic-v3
1

if use ion-label as float and ion-input placeholder both at the same time. i get the following few.

image

here’s the code:

<div *ngFor="let job of jobs; index as i">
   <ion-item>
      <ion-label floating>Job # {{i + 1}}</ion-label>
      <ion-input type="text" placeholder="Write here" [(ngModel)]="job.answer"></ion-input>
   </ion-item>
</div>

if i click inside the input, then label & placeholder seperates.

image.

ion-label and ion-input’s placeholder shouldn’t need to merge together. Right ???

2

if you are using floating label then there is no meaning of placeholder
you must use only 1 for your textbox
use of both is not meaningfull anymore !!!

3

You could use the stacked position

Example:

    <ion-item>
      <ion-label floating >Server</ion-label>
      <ion-input></ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>Port</ion-label>
      <ion-input placeholder="21"></ion-input>
    </ion-item>

The input will be shown like the floating position

Screenshot_2020-03-03_12-16-49