Bootstrap 3 + simple_forms checkboxes - simple-form

Question

I'm trying to integrate bootstrap 3 with simple_forms (from master).
Right now, I have the following:
config/initializers/simple_form.rb:
SimpleForm.setup do |config|
config.wrappers :default, class: :input,
hint_class: :field_with_hint, error_class: :field_with_errors do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label_input
b.use :hint, wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
end
config.default_wrapper = :default
config.boolean_style = :nested
config.button_class = 'btn'
end
config/initializers/simple_form_bootstrap.rb:
SimpleForm.setup do |config|
config.input_class = 'form-control'
config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
prepend.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
end
end
config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-append' do |append|
append.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
end
end
config.default_wrapper = :bootstrap
end
app/views/devise/sessions/new.html.haml
%div.panel.panel-auth
%div.panel-heading
%h3.panel-title Sign in
%div.panel-body
= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
.form-inputs
= f.input :email, :required => false, :autofocus => true
= f.input :password, :required => false
= f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
.form-actions
= f.button :submit, "Sign in"
%hr
= render "devise/shared/links"
But the generated HTML is wrong. Well, it's right according to BS2, but wrong to BS3. Here it is:
<div class="form-group boolean optional user_remember_me">
<label class="boolean optional control-label" for="user_remember_me">
Remember me
</label>
<div class="controls">
<input name="user[remember_me]" type="hidden" value="0">
<label class="checkbox">
<input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
</div>
</div>
But it actually should be something like:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
It's probably possible to fix this hacking around wrappers, but I can't get it working.
Can someone give me some advice about that?
Cheers

Answer 1

Like you said, you can get it working with a custom wrapper:
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
# Form extensions
b.use :html5
# Form components
b.wrapper tag: :label do |ba|
ba.use :input
ba.use :label_text
end
b.use :hint, wrap_with: { tag: :p, class: "help-block" }
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end
Which you then reference in your input:
= f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?
Note however this won't work for collection_check_boxes:
= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: #employee_roles, label: false
You could try hacking together a custom input for the latter case, but it's a bit messy. Maybe somebody else knows a better way... and perhaps simple_form will catch up with bootstrap 3 soon enough.

Answer 2

Next configuration works perfectly for me with bootstrap 3:
SimpleForm.setup do |config|
...
config.boolean_style = :inline
...
end
Simple custom wrapper
config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label_input
end
Usage:
= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox

Answer 3

I found a really simple solution for Bootstrap 3 checkboxes. Assuming you already have the bootstrap 3 wrapper configured, all I had to do is add a custom input in app/inputs as checkbox_input.rb:
class CheckboxInput < SimpleForm::Inputs::BooleanInput
# this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead
end
and use it via:
= f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?
This will change the css boolean on the form-group to be checkbox instead, which will get the proper styling.
Similarly, here is a version for radio-inline
class RadioInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput
# by default, this omits labels. You should use f.label before this to stick a label where you would like.
def initialize(builder, attribute_name, column, input_type, options = {})
super(builder, attribute_name, column, :radio_buttons, {label: false}.merge(options))
end
def item_wrapper_class
'radio-inline'
end
end
Used as:
= f.label :frequency
= f.input :frequency, collection: #membership_plan.interval_frequencies, as: :radio_inline

Answer 4

Here's a quick way to fix the checkbox issue whilst we wait for Rafael to implement Bootstrap3: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master
Make sure you add "config.bootstrap3 = true" to your initializer...

Answer 5

I have next requirements for my checkbox:
<div class="checkbox">
<input type="hidden" value="0" name="...">
<label>
<input type="checkbox" value="1" name="..."> Label text
</label>
</div>
Hidden input was extracted from label since it does not check checkbox on label click. I do not know why but I was not able to generate such html just using config so here is config + custom input class
# Config
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
# Form extensions
b.use :html5
b.use :placeholder
b.use :input
b.use :hint, wrap_with: { tag: :p, class: "help-block" }
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end
# Input goes to app/inputs/inline_checkbox_input.rb
class InlineCheckboxInput < SimpleForm::Inputs::Base
def input
out = ''
out << #builder.hidden_field(attribute_name, value: 0).html_safe
out << "<label>"
out << #builder.check_box(attribute_name, {}, 1, nil)
out << "#{options[:label]}</label>"
out
end
end
# Usage
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox

Answer 6

You can just use this:
<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %>