Ionic-framework: Floating ion-label overlay ion-select placeholder

[NeoLSN]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Floating ion-label overlay ion-select placeholder

Expected behavior:
Floating ion-label should not overlay ion-select placeholder

Related code:

<ion-item>
        <ion-label floating color="primary">SSID</ion-label>
        <ion-select [(ngModel)]="selectAp" name="ssidSelect" #ssidSelect="ngModel" placeholder="Please choose" (ngModelChange)="wifiApSelected()">
          <ion-option *ngFor="let ap of wifiAps" [value]="ap">{{ ap.ssid }}</ion-option>
        </ion-select>
      </ion-item>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[lucasbasquerotto]

@NeoLSN For now you can use stacked instead of floating, after all, floating and stacked ion-label behave the same way when there is some value in the field, and if you have a placeholder you don't want the label in the field (but above it, I think), so a floating label should also behave like a stacked label in this case IMO. That is, both should behave the same way when there is a placeholder, so you can just use stacked.

[EmmanuelFRANCOIS]

Same bad behavior whit ion-input & ion-datetime.
Probably the same with other form components...
Tested with:

<ion-item>
  <ion-label floating>Floating label</ion-label>
  <ion-input type="text" placeholder="Enter something..."></ion-input>
</ion-item>

and

<ion-item>
  <ion-label floating>DateTime</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" placeholder="Pick a date..."></ion-datetime>
</ion-item>

<ion-label floating> should behave like <ion-label stacked> when ion-item child control does not have a value, but has a placeholder.

[bogomips]

@EmmanuelFRANCOIS I've the same issue, I will disable the floating labels until this problem gets fixed

[ricardo-mello]

Thank you @lucasbasquerotto. stacked did the trick.

[menshinobi]

I also got this bug. Stackeddid the trick but I would also love to get this fixed

[felschr]

Would be nice to have an actual fix for this.

[RichardM99]

@jgw96 Any update on this one guys?

[adrianomigani]

Thank you, working => stacked

[ahmedtabrez]

A temporary workaround:

ion-input.floating-with-placeholder{
    input:focus::-webkit-input-placeholder { color:gray; }
    input:focus:-moz-placeholder { color:gray; }
    input:focus::-moz-placeholder { color:gray; }
    input:focus:-ms-input-placeholder { color:gray; }
    input::-webkit-input-placeholder { color:transparent; }
    input:-moz-placeholder { color:transparent; }
    input::-moz-placeholder { color:transparent; }
    input:-ms-input-placeholder { color:transparent; }
}

<ion-item>
  <ion-label floating>Floating Label</ion-label>
  <ion-input type="text" placeholder="placeholder" class="floating-with-placeholder"></ion-input>
</ion-item>

[Xample]

Or more globally

  ion-label[floating] + ion-input {
    input:not(:focus)::-webkit-input-placeholder { color:transparent; }
    input:not(:focus):-moz-placeholder { color:transparent; }
    input:not(:focus)::-moz-placeholder { color:transparent; }
    input:not(:focus):-ms-input-placeholder { color:transparent; }
  }

<ion-item>
     <ion-label floating> Floating Label </ion-label>
     <ion-input type="text" placeholder="placeholder"></ion-input>
</ion-item>

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/261