Search code examples
ruby-on-railsformssyntaxwrappersimple-form

Inline Checkbox Wrapper for vertical form with Simpleform


I have a vertical form using Simpleform, and in that form I have a checkbox collection as one of my inputs. The issue is the checkbox label is not inline with the box itself.

I found This on the simple form page: https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers

However after putting that in the form, I get a Syntax Error:

/Users/michaelgodek/Sites/Travvl/app/views/pins/_form.html.erb:16: syntax error, unexpected ',', expecting tASSOC
..."], ["Teenage (13-17 Years)"]], :last, :first, label: "What ...
...                               ^

Trace of template inclusion: app/views/pins/_form.html.erb, app/views/pins/new.html.erb

Here is the config wrapper code located in config/initializers/simple_form.rb just like on the wiki page:

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

And in my form I have:

<%= f.collection_check_boxes :kids_age, :wrapper => :inline_checkbox, [["Infant (0-1 Year)"], ["Toddler (1-3 Years)"], ["Preschool (3-5 Years)"], ["School Age (6-10 Years)"], ["Preteen (11-12 Years)"], ["Teenage (13-17 Years)"]], :last, :first, label: "What age groups are the kids in?" %>

I thought it could be because the wiki page is referring to a single checkbox and something would be different for a checkbox collection, but I'm not sure. Also, when I remove the :wrapper => :inline_checkbox, from the input above, I do not get a syntax error. Instead it simply displays the checkboxs with the label directly below the checkbox.


Solution

  • I figured it out after leaving it for a while, then coming back to it. I put it here for anyone else that might run into it.

    I'm sure there are more ways to do this but I ran across label class="checkbox inline" in bootstrap, and just wrapped my form input in that and it worked! simple as that! Now my form input looks like this:

    <label class="checkbox inline">
      <%= f.collection_check_boxes :kids_age, [["Infant (0-1 Year)"], ["Toddler (1-3 Years)"], ["Preschool (3-5 Years)"], ["School Age (6-10 Years)"], ["Preteen (11-12 Years)"], ["Teenage (13-17 Years)"]], :last, :first, label: "What age groups are the kids in?" %>
    </label>