Simple Form format without custom CSS in rails - ruby-on-rails

Question

I use simple_form gem in rails project and am going to implement a form. The form is very simple:
<%= simple_form_for admin, url: url do |f| %>
<div class="form-inputs">
<%= f.input :name %> #String
<%= f.input :email %> #String
<%= f.input :sso_only %> #Boolean
</div>
<% end %>
The generated html is:
<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/admin/admins" accept-charset="UTF-8" method="post">
<div class="form-group string required user_name">
<label class="string required col-sm-4 control-label" for="user_name">
<abbr title="required">*</abbr>
Name
</label>
<div class="col-sm-8">
<input class="string required form-control" type="text" name="user[name]" id="user_name">
</div>
</div>
<div class="form-group email required user_email">
<label class="email required col-sm-4 control-label" for="user_email">
<abbr title="required">*</abbr>
Email
</label>
<div class="col-sm-8">
<input class="string email required form-control" type="email" value="" name="user[email]" id="user_email">
</div>
</div>
<div class="form-group boolean optional user_sso_only">
<div class="col-sm-8">
<div class="checkbox">
<input value="0" type="hidden" name="user[sso_only]">
<label class="boolean optional" for="user_sso_only">
<input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
SSO Only
</label>
</div>
</div>
</div>
</form>
The display is:
From the image we can see, the name and email fields include label and input two parts. label has 4 size and input has 8.
However, the checkbox only include one part, which is 8. So it is very ugly when the checkbox in that position.
Normally, I would like the checkbox starts at the same position as the input box. And that should be the normal display for a form.
Therefore, is there any way to reach this by using simple_form itself? without customise the CSS.
I have tried wrapper but failed.

Answer 1

To achieve the result you want, and allow customisation, you'll need to make a modification to both your markup and the wrapper.
see: https://github.com/plataformatec/simple_form#the-wrappers-api
You can modify the existing top level wrapper to expose the div for which you want to include the offset.
Your erb markup for the sso_only field can be modified like so:
<%= f.input :sso_only, checkbox_wrapper_html: { class: 'col-sm-offset-4' } %>
Then, in order for the markup to recognise the modification, you have to change your existing initializer containing your wrapper definitions to respond to the checkbox_wrapper option (taken from the defaults).
# config/initializers/simple_form.rb
....
config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper :checkbox_wrapper, tag: 'div', class: 'col-sm-8' do |wr|
wr.wrapper tag: 'div', class: 'checkbox' do |ba|
ba.use :label_input
end
wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
wr.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
....
note the addition of :checkbox_wrapper within the block. This will allow you to use the checkbox_wrapper_html option in the markup as mentioned above.
This can also be applied to any other existing wrapper.

Answer 2

Im not familar with simple form but it looks like you need another column like your inputs. Try adding some kind of span with the 'col-sm-4' class.
<span class="col-sm-4 control-label" for=""></span>
<div class="col-sm-8">
<div class="checkbox">
<input value="0" type="hidden" name="user[sso_only]">
<label class="boolean optional" for="user_sso_only">
<input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
SSO Only
</label>
</div>
</div>