Custom Wrappers

Custom Wrappers

Inline Checkbox + Label inside of vertical form

Currently you need a custom wrapper if you want to display the checkbox label beside the checkbox in a vertical form. Here is how you do it:

Add this to config/initializers/simple_form.rb

config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

In the view use it like:

= f.input :remember_me, :wrapper => :inline_checkbox

Here is what it looks like:

---

Using Twitter Bootstrap, I've had luck with the following:

config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.wrapper :tag => 'label', :class => 'checkbox' do |bb|
      bb.use :input
      bb.use :label_text
    end
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

---

Twitter Bootstrap + Inline Checkbox + Label inside of horizontal form

  # config/initializers/simple_form.rb
  config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

// style.css.scss
.form-horizontal {
  div.checkbox.inline {
    .control-label {
      text-align: left;
    }
  }
}