Semantic ui with simple_form

Question

tell me how to configure simple_form. I would like to use the checkbox of semantic ui, but when I wrap checkbox in the class, he becomes active, that is, visually it is, but when you click the check box is not activated.

    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
     .ui.three.column.middle.aligned.relaxed.grid.basic.segment
       .column
       .column
       .column
         .ui.form.segment
           #marg.field= f.label :email, 'Email'
           #marg.field=f.input :email, placeholder: 'Email', autofocus: true, label: false
           #marg.field= f.label :password, 'Пароль'
           = f.input :password, :required => false, placeholder: 'Пароль', label: false
           #marg.ui.toggle.checkbox
             = f.input :remember_me, as: :boolean if devise_mapping.rememberable?
           #marg= f.button :submit, 'Войти!', class: 'small ui blue submit button'

http://i.imgur.com/C8Wn4K9.png

Answer 1

Please try it

= f.input :remember_me, as: :boolean, boolean_style: :inline 

Answer 2

A simpler way to do this is to create a custom simple form wrapper. Here is a blogpost which describes how to add the wrapper: http://pranavsingh.me/semantic-ui-simple-form-wrapper/

The above configuration will automatically add all the essential classes semantic form classes, and also adds wrappers to create proper checkbox fields. Below is an example:

= f.input :published, label: "Published?",
hint: "If you are not ready to go live yet, keep this site unpublished.",
wrapper: :ui_toggle_checkbox

Answer 3

Here's what I had to do (the accepted answer got me on the right track, but didn't fully fix the issue):

In the config/initializers/simple_form.rb file, change

config.boolean_style = :nested

to

config.boolean_style = :inline

This prevents Simple Form from wrapping the input tag in the label tag (essentially inserting a tag between the '.ui .checkbox' div and the input, which breaks Semantic's checkbox functionality).

In the app/assets/javascripts/application.js file:

$('.ui.checkbox').find('input').checkbox();

My form now displays checkboxes correctly and passes the appropriate value when submitted.

---

Here is another option (to just fix one checkbox) -

In a _form.html.erb partial:

<div class="inline field">
  <div class="ui checkbox">
    <%= my_form.input :my_input, label: 'My Label', as: :boolean, boolean_style: :inline %>
  </div>
</div>

In the application.js file:

$('.ui.checkbox').find('input').checkbox();