我在我的 Rails 4.2 元素中使用 simple_form。在使用错误显示进行验证后,我在行/字段对齐方面遇到了一些问题。任何验证的字段都不会与验证失败的字段垂直对齐。
<%= simple_form_for(@creditrequest) do |f| %>
<%= f.error_notification %>
<br>
<div class="form-actions creditrequest_form">
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :account, as: :string, label: "Account #", placeholder: "000-012345" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :gldsname, label: "GLDS Name", placeholder: "Bob Wehadababyitsaboy" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :contact_no, label: "Contact No", placeholder: "(989) 555-1212" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :credit_amount, as: :string, label: "Credit Amount", placeholder: "$", class: "textarea_oneline" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :package, placeholder: "PLV" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :reason, placeholder: "Credit for Service Issue" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :detail, as: :text, label: "Why are we issuing a credit?" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :tech, placeholder: "AN" %>
<br>
<br>
<%= f.button :submit, "Submit", class: "btn btn-custom" %>
</div>
</div>
</div>
<% end %>
最佳答案
Simple Form 根本不是这个问题的根源。问题是你的样式,你需要先为你的 block 设置行高和垂直对齐方式:
.form-actions.creditrequest_form {
> .row.row-centered {
line-height: %{Parent-value}px;
> .col-sm-2.col-centered {
display: inline-block; /* can use vertical alignment */
vertical-align: top; /* pull all to top */
line-heigth: %{child-value}px;
}
}
}
更新:考虑到 .error 是在错误时添加的,它可以添加不正确的样式。
关于css - simple_form 行垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33814135/