CODEWITHSUNDEEP
polymer
user19283043
user19283043

Reputation: 357

How to position <paper-input>s horizontally

I'd like to position two <paper-input>s horizontally like this:

screenshot

How do I do that?

Upvotes: 1

Views: 183

Answers (2)

Goce Ribeski
Goce Ribeski

Reputation: 1372

Polymer way of doing it is by iron-flex-layout element.

When using it take care of this note from the docs:

...You must do this in any element that uses any of the iron-flex-layout styles.

So, after all imports(element & style), it should look as this:

<div class="layout horizontal">
        <paper-input label="Email"></paper-input>
        <paper-input label="ID"></paper-input>
</div>

Upvotes: 0

OctavianM
OctavianM

Reputation: 4617

There are several solutions to your problem. The simplest is to add a CSS class to your input element, which should contain the display:inline-block rule.

.inline-element {
    display: inline-block;
}

And apply your class to the <paper-input>s:

<paper-input label="Email" class="inline-element"></paper-input>
<paper-input label="Sub ID" class="inline-element"></paper-input>

Upvotes: 2

Related Questions