Rails Devise & Simple Form

Question

I am trying to make an app with Rails 4, devise and simple form.

The devise view has a standard remember me checkbox, which I am trying to format.

I read a blog post showing me how to alter the devise checkbox aligment for the remember me field (which as a standard pushes the checkbox to the left of the vertical alignment of the other fields in the form.

To fix this, I changed my framework_and_overrides.css.scss to include:

.checkbox input[type="checkbox"] {
  margin-left: 0;
}

Now, when I try to use the devise form, the checkbox appears on top of the letter 'R' in the remember me label.

Also, my css to style the words 'remember me' won't apply to that text.

My field currently has:

        <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>

The styling I'm trying to apply is in the 'devise labels' class - it changes the font color and size. But it isn't working on this specific form element. It works fine on the other elements in the form and doesnt alter margins:

.deviselinks {
  font-family: 'Quicksand', sans-serif;
  color: white;
    a:link {text-decoration:none; background-color:transparent; color:white;};
    a:visited {text-decoration:none;background-color:transparent; color:white;};
    a:hover {text-decoration:none;background-color:transparent; color:white;};
    a:active {text-decoration:none;background-color:transparent; color:white;};

}

Does anyone know how to move the words 'remember me' over so they are to the left of the check box (rather than the 'R' being underneath the checkbox)? Also, how do I apply my font styling to the words 'Remember me'?

The entire new session form is:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">

      <div class="devisetitle">Welcome back</div>
    </div>

  <%= simple_form_for(resource, as: resource_name, :html => {:id => "sign_in_user"}, url: session_path(resource_name)) do |f| %>


      <div class="row">
        <div class="col-md-3 col-md-offset-3">
          <div class="row">
            <div class="col-md-12">


              <%- if devise_mapping.omniauthable? %>

                  <div class="facebookauth">
                    <%= link_to "Login with Facebook", user_omniauth_authorize_path(:facebook) %>
                  </div>

              <% end -%>

            </div>
          </div>

          <div class="row">
            <div class="col-md-12">


              <%- if devise_mapping.omniauthable? %>

                  <div class="googleauth">
                    <%= link_to "Login with Google", user_omniauth_authorize_path(:google_oauth2) %>
                  </div>

              <% end -%>

            </div>
          </div>


          <div class="row">
            <div class="col-md-12">

              <%- if devise_mapping.omniauthable? %>
                  <div class="linkedinauth">
                    <%= link_to "Login with LinkedIn", user_omniauth_authorize_path(:linkedin) %>
                  </div>

              <% end -%>


            </div>
          </div>
        </div>




        <div class="col-md-5">
          <div class="emailform">
            <div class="form-inputs", style="margin-left: 7%">


              <%= devise_error_messages! %>


                <%= f.input :email, :label_html => {:class => 'deviselabels'}, placeholder: 'Enter email',  autofocus: true, :input_html => {:maxlength => 25, :size => 40, class: 'lineitemdevise'} %>
                <%= f.input :password, :label_html => {:class => 'deviselabels'},  placeholder: 'At least 8 characters', :input_html => {:maxlength => 15, :size => 40, class: 'lineitemdevise'} %>

                <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>

           </div>

            <div class="form-actions">
              <%= f.button :submit, "Login", :class => "dcpb" %>
            </div>
  <% end %>

  </div>


  </div>



  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="loginredirect">
        <%= render "devise/shared/links" %>
      </div>
    </div>
  </div>
  </div>
</div>

Answer 1

You could move the label text into a separate label tag. Something like:

<% if devise_mapping.rememberable? %>
  <%= f.label :remember_me, "Remember Me", class: 'deviselabels' %>
  <%= f.check_box :remember_me %>
<% end %>

This would make the check_box appear after the label . To make the check_box appear below, just add a <br/> in between them or add the display: block; styling to both of them. You can use the class deviselabels to style the text however you want.

Edit:

So Simple Form is a tool to make building forms easier. Your one line of code is equivalent to my four lines above, with the exception of the label and check_box being flipped. The reason for this is that that is the conventional way of displaying a label/checkbox combo (checkbox then label).

That being said, there is another way of achieving this, though one not as "clean", IMO. You could give the check_box the style position: absolute and play with the top style (ie top: 20px ). You might have to give the parent element the style position: relative to make it work. As I said, not as clean, but it does work.