Polymer 2.x - <paper-label> for something other than a <paper-input> element?

353 Views Asked by At

I have a dialog with some <paper-input> elements with labels, and one element which is not a <paper-input> but which I also want to provide an identical-looking label for.

I've tried various solutions, but none seem to give me an identical label that is correctly placed. For example, this code places the label on top of the <div slot="input"> element:

<paper-input-container>
    <label slot="label">Location</label>
    <div slot="input">
        <img src="https://maps.googleapis.com/maps/api/staticmap?center=[[_position.lat]],[[_position.lng]]&zoom=16&size=200x125&maptype=roadmap&markers=color:red%7label:%7C[[_position.lat]],[[_position.lng]]&key=MY_API_KEY">
        <paper-button on-tap="doStuff"><iron-icon icon="maps:place"></iron-icon> &nbsp; Pick location</paper-button>
    </div>
</paper-input-container>

The result isn't exactly what I'd hoped for:

enter image description here

Is there a way to get labels that look like the others (i.e. Name, Description and Category) when I don't have a <paper-input> present?

1

There are 1 best solutions below

0
Magnus On

Turned out to be easy enough to fix - I simply added always-float-label to the <paper-input-container> and things started working as expected.

<paper-input-container always-float-label>
    ...
</paper-input-container>

It seems that the reason I didn't need to add that to the other input elements is that they have their placeholder attributes set, which automatically makes the label "floating" (i.e. small and appearing above the input).