Ionic2: ion-input Issue with label not floating up when type is a number and value is 0
See original GitHub issueIf 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:
- Click on
Calculate
button - A zero is populated in the input
- 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:
- Created 7 years ago
- Reactions:1
- Comments:7 (7 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Just merge the PR
@manucorporat No problem. Thanks for working this one. Glad to see it is fixed. I will be able to remove my hack soon.