Search code examples
cssruby-on-rails-4simple-form

simple_form row vertical alignment


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 %>

enter image description here


Solution

  • 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.