Polymer.js выравнивает железоформные элементы по горизонтали

Question

Polymer.js выравнивает железоформные элементы по горизонтали

Я пытаюсь создать форму, используя Polymer 2.0, используя железную форму. Я хочу выровнять два элемента формы в одной строке и следующие два элемента в следующей строке и так далее. Но я не могу понять, что использовать для достижения этой цели.

Пожалуйста, смотрите код ниже.

<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                    <paper-input float-label label="First Name"></paper-input>
                    <paper-input float-label label="Last Name"></paper-input>
                    <paper-input float-label label="Address"></paper-input>
                    <paper-input float-label label="State"></paper-input>
                    <paper-input float-label label="Country"></paper-input>
                    <paper-input float-label label="PIN"></paper-input>
                    <paper-input float-label label="Phone (Mobile)"></paper-input>
                    <paper-input float-label label="Phone (Office)"></paper-input>
                    <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
        </div>

Помощь высоко ценится.

0

javascript polymer-2.x iron-form

Источник

user2931587 28 ноя '17 в 19:12

3 ответа

Другие вопросы по тегам javascript polymer-2.x iron-form

user3081560 01 дек '17 в 06:48 2017-12-01 06:48 · Answer 1 · 2017-12-01 06:48

Wrap two paper input elements into div and apply style as shown below.

 <style>
      div{
       @apply --layout-horizontal;
       @apply --layout-flex;
     }
   </style>

   <div>
    <paper-input float-label label="First Name"></paper-input>
    <paper-input float-label label="Last Name"></paper-input>
   <div>

0

Источник

user3081560 01 дек '17 в 06:48

user5347610 29 ноя '17 в 13:10 2017-11-29 13:10 · Answer 2 · 2017-11-29 13:10

Заворачивать <paper-item></paper-item> каждый <paper-input></paper-input> что вы хотели бы использовать в той же строке, также добавьте отступы, чтобы освободить место. то есть:

<style>
   paper-input {padding-left:10px }
</style>

<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                   <paper-item>
                      <paper-input float-label label="First Name"></paper-input>
                      <paper-input float-label label="Last Name"></paper-input>
                    </paper-item>
                    <paper-item>
                      <paper-input float-label label="Address"></paper-input>
                      <paper-input float-label label="State"></paper-input>
                    </paper-item>
                    <paper-item>
                      <paper-input float-label label="Country"></paper-input>
                      <paper-input float-label label="PIN"></paper-input>
                    <paper-input float-label label="Phone (Mobile)"></paper-input>
                    </paper-item>
                      <paper-input float-label label="Phone (Office)"></paper-input>
                      <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
</div>

user2931587 01 дек '17 в 19:36 2017-12-01 19:36 · Answer 3 · 2017-12-01 19:36

Большое спасибо за все ответы. В конце концов я решил использовать granite-bootstrap-grid из компонента granite-bootstrap.

Поскольку я очень привык к начальной загрузке, это помогло мне использовать те же классы начальной загрузки, чтобы получить адаптивную природу в полимерном приложении.

пожалуйста, найдите ссылку ниже.

https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap