question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic2: ion-input Issue with label not floating up when type is a number and value is 0

See original GitHub issue

If you have an ion-input element with type=“number”. When the model changes to zero, the label does not float up.

I expect the label to float up.

Steps to reproduce:

  1. Click on Calculate button
  2. A zero is populated in the input
  3. The label and the input are on top of each other.
    <form [ngFormModel]="weightForm" novalidate>
      <ion-item>
        <ion-label floating>Weight</ion-label>
        <ion-input type="number" ngControl="weight" [(ngModel)]="weightModel"></ion-input>
      </ion-item>
      <button secondary (click)="calculateWeight()">Calculate</button>
    </form>

Here is the plunker that demonstrates the issue:

http://plnkr.co/edit/TEWz3FtRTH1lWgXbWHNU?p=preview

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0-beta.37 Ionic App Lib Version: 2.0.0-beta.20 ios-deploy version: 1.8.5 ios-sim version: 3.1.1 OS: Mac OS X El Capitan Node Version: v5.8.0 Xcode version: Xcode 7.3.1 Build version 7D1014

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
keithdmoorecommented, Sep 8, 2016

Just merge the PR

0reactions
keithdmoorecommented, Oct 1, 2016

@manucorporat No problem. Thanks for working this one. Glad to see it is fixed. I will be able to remove my hack soon.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-input: Custom Input Value Type Styling and CSS Properties
Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or...
Read more >
Number input with wrong value in floating label is overlapped ...
Number input with wrong value in floating label is overlapped by label. Steps to reproduce: Add ion-input with type 'number'; Enter not valid...
Read more >
ion-libel positon="floating" is not working with ion-input ...
If input hasn't placeholder it works fine but in my case it has a placeholder. How can I fix it? <ion-item> <ion-label position="floating"...
Read more >
:placeholder-shown - CSS: Cascading Style Sheets | MDN
The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.
Read more >
Advanced Forms & Validation in Ionic & Angular | Josh Morony
A FormControl is tied to an input field, it has a value (i.e. the value the user has entered), and a validation state...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found