Simple_form: check boxes with twitter bootstrap integration

[fschwahn]

Hi,
I'm using the latest version (e6fe814bbe5bb025e0489d3999b872bd936acd94) from git and there are some problems with check boxes:

1. The hint is displayed in the same line as the check box. I guess this is not intended.
2. The label is displayed on the left side of the check box. Is it possible to configure simple_form using the new syntax to display it on the right side? It looks nicer in my opinion.
3. (not related to check boxes, but still) The generated scaffold form generator should use the class form-actions instead of actions for the buttons when using twitter bootstrap.

The integration is great!

Best regards,
Fabian

[carlosantoniodasilva]

Hey, thanks for your input. We're going to check your report, meanwhile we're releasing a 2.0.rc release that you can check and play with.

About the label at left, this is how Bootstrap handles checkboxes as you can see in their examples: http://twitter.github.com/bootstrap/base-css.html#forms.

Let us know about any other issue. Thanks.

[fschwahn]

Hey,
I've actually checked the bootstrap documentation, and if you take a look at the 'Basic form'-example, the label is actually on the right side of the check-box. But I agree that it seems to be on the left side for horizontal forms.

[mrwokkel]

Hi,

May I note that the position of the label also depends on country specific conventions.
In the Netherlands the convention is to put the label on the right side of the radio/check-boxes (always).

[carlosantoniodasilva]

@fschwahn I was checking this and seems you can achieve that check box style by giving :boolean_style => :nested to the f.input call. That should give you a similar check box wrapped by a label and with text inside. By default SimpleForm will stick with the label on left. Could you please give it a try? Thanks

[carlosantoniodasilva]

I believe your 3rd point is ok now :)

[fschwahn]

Hey,
I just pulled the latest version from git an reran the generator so I'm up to date. But passing :boolean_style => :nested does not change the markup at all, probably because the boolean style for bootstrap is already :nested by default. Using :boolean_style => :inline also didn't help.

Just to clear things up a bit, simple_form right now generates this markup for a boolean field:

<div class="control-group boolean optional">
  <label class="boolean optional" 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" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
    </label>
  </div>
</div>

The markup I'd like it to generate is something like the following:

<div class="control-group boolean optional">
  <div class="controls">
    <input name="user[remember_me]" type="hidden" value="0">
    <label class="checkbox" for="user_remember_me">
      <input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me?
    </label>
  </div>
</div>

Is it possible to configure this behavior?

Best regards,
Fabian

[carlosantoniodasilva]

Yes, it is possible but it'll need a different wrapper =(. Take a look at #426 for more info. We'll check how to improve that.

[fschwahn]

hmm, both issues have been closed now. So did you add the needed wrapper?

[josevalim]

The label should have the new checkbox class.

[fschwahn]

Ah ok, just if anyone else is wondering, add the following to the config/initializers/simple_form.rb:

config.wrappers :checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
  b.use :tag => 'div', :class => 'controls' do |ba|
    ba.use :label_input
  end
end

and then use this wrapper as follows:

<%= f.input :remember_me, :as => :boolean, :wrapper => :checkbox %>

[jbeasley6651]

@ fschwahn thanks for that, saved me some time

[pietere]

@fschwahn great, just what I needed as well!

[pruimmartin]

@fschwahn And just what i needed as well! Thanks!

[MaximilienM]

@fschwahn +1, great ! Thanks.

[rubytastic]

@fschwahn +1 thx

Also label of checkbox was aligned right with latest twitter bootstrap and simple_form 2 so I added this:

//Checkbox right fix
label.checkbox {
text-align: left !important;
}
input[type=checkbox] {
margin-right: 10px !important;
}

in scss file to override the bootstrap css and make it align more nicely :)

[iscott]

+1 thanks for posting!

[ghost]

+1 thanks @fschwahn

[subelsky]

+1 this is great!

[coreyward]

This is really close, but there shouldn't be a control-label class on the checkbox label or it behaves as though it is in the label column in horizontal forms (and this really starts to matter if you're using the responsive styles).

[markus]

You can use :label => false, :inline_label => true on the checkbox. Or specify that to be the default in app/inputs/boolean_input.rb:

class BooleanInput < SimpleForm::Inputs::BooleanInput
  def initialize(builder, attribute_name, column, input_type, options = {})
    super(builder, attribute_name, column, input_type, {:label => false, :inline_label => true}.merge(options))
  end
end

[joe1chen]

+1 thanks @fschwahn for the snippet for checkboxes. This works great for bootstrap's horizontal forms. But when you want to generate a checkbox for basic form and inline form, you can add

config.wrappers :checkbox_inline, :tag => false do |b|
  b.use :label_input
end

That'll generate html without the control group and control wrapper div's.

Use it like:

<%= f.input :remember_me, :as => :boolean, :wrapper => :checkbox_inline %>

[TatianaTyu]

@fschwahn thanks for the snippet!

[danielnegri]

+1

[bluemont]

@ joe1chen thanks!

[RobertAudi]

The solution that @fschwahn suggested works great for single checkboxes but not for collection_check_boxes. Any ideas on how to solve this problem please?

[Saidbek]

@ joe1chen thanks

[MarioRicalde]

I successfully implemented the inline checkboxes using simple_form 2.1 and config.wrapper_mappings feature, example of the implementation in the following commit:

https://github.com/amooma/GS5/commit/7d507dcc1bbbf5244b8d75f40c7cb6bc15906b33

[HninNweOo]

I want to know how to use twitter bootstrap css in collection_check_boxes.please if you know, tell me.