[英]Polymer.js align iron-form elements horizontally
I am trying to create a form using Polymer 2.0 using iron-form. 我正在尝试使用Iron-form使用Polymer 2.0创建一个表单。 I want to align two form elements in one row and the next two element in the next row and so on. 我想在一行中对齐两个表单元素,在下一行中对齐下两个元素,依此类推。 But i cant figure what to use to achieve this. 但是我不知道该怎么用。
Please see the code below. 请参见下面的代码。
<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>
Help much appreciated. 帮助非常感谢。
Wrap <paper-item></paper-item>
each <paper-input></paper-input>
that you like to use at same row, also add padding to make space. 将要在同一行中使用的每个<paper-input></paper-input>
包装<paper-item></paper-item>
,并添加填充以腾出空间。 ie: 即:
<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>
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>
Thank you so much for all the response. 非常感谢您的所有答复。 I finally decided to use granite-bootstrap-grid from granite-bootstrap component. 我最终决定使用granite-bootstrap组件中的granite-bootstrap-grid。
As i am very much used to bootstrap, this helped me to use the same bootstrap classes to get the responsive nature within polymer application. 因为我非常习惯引导程序,所以这帮助我使用相同的引导程序类来获得聚合物应用程序中的响应性。
please find the link below. 请在下面找到链接。
https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.