Search code examples
javascriptpolymerpaper-elements

paper-input show input and label on top of each other

I have the following HTML

<paper-input-container>
    <label>Name</label>
    <input is="iron-input" value="{{name}}">
</paper-input-container>

Now, when I start typing in this field, the label moves nicely above the input (as expected). But when initially name already has a value the label doesn't do all this and thus both name and label are on top of each other. Any suggestions how to fix this?

Solution

  • Since you are using iron-input you should try bind-value instead.

    So this would work -

    <paper-input-container>
    <label>Name</label>
    <input is="iron-input" bind-value="{{name}}">
</paper-input-container>