When I have a form with inline labels, the label goes off-screen when I fill up the text field. Below are screenshots before and after typing text into my browser (300px wide).
I’m using markup specified at http://ionicframework.com/docs/components/#forms-inline-labels which looks like
<div class="list"> <label class="item item-input"> <span class="input-label">Email address</span> <input type="email" placeholder="Enter email"> </label> </div>
Reproduced here http://codepen.io/mikemintz/pen/LExZYb?editors=101 You have to make the browser window narrow enough to see this. I can reproduce it on an iPhone 5 by loading it directly at http://codepen.io/mikemintz/debug/LExZYb
Any ideas how to properly address this? Am I doing something wrong, or should I report a bug to ionic?
It looks like the culprit might be in scss/_form.scss when it adds @include flex(1, 0, 220px) to .item-input input. I could remove those lines, but I don’t know what else that might break.
This is similar to Inline textarea label is shifting except that this affects single line text fields.