I'm using simple_form in my rails 4.2 project. I'm having some trouble with the row/field alignment following a validate with the error display. Any field that validates does not vertically align with the failed validated fields.
<%= 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 %>
At all Simple Form is not source of this problem. The problem is you styles, and you need first set line height and vertical alignment for you blocks:
.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;
}
}
}
Update: Consider that .error is added on error and it can add not right styles.