Input with inline label goes off-screen

ionic-v1
1

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).

image

image

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.

1 Like
2

Hmm, too a look into it.

If we change the flex properties on the inputs, it seems like it can resolve the issue.