Input with inline label goes off-screen

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 which looks like

<div class="list">
  <label class="item item-input">
    <span class="input-label">Email address</span>
    <input type="email" placeholder="Enter email">

Reproduced here 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

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

Hmm, too a look into it.

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