Checkbox won't appear, when using materialize css framework and simple form in rails

Question

I already find a solution to my problem. Just want to share it with others.

So, I am writing a rails app which uses simple form to generate forms and the style is controlled by materialize css framework.

The first problem I have is to let simple form output a input tag with type checkbox for a boolean value. Upon checking their documentation, here is my solution:

f.input :delivery_check, as: :boolean, label: "Check if order was delivered"

Yet, although simple form output that input tag with type checkbox, only the label of that box appears in view.

ypan ypan · Accepted Answer · 2016-04-08T23:29:11

Here is my working solution:

First, upon reading the code example on materialize's website. The input tag need to appear before the label tag. So we need to custom our own wrapper in simple form.

So, in your config/initializers directory, there should be a simple_form.rb ( or simple_form_bootstrap.rb if you initialized it)

add your wrapper like this

config.wrappers "my_checkbox", tag: 'div', class: "col s4", error_class: 'has-error' do |b|
  b.use :input
  b.use :label
  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

Now, in your view template where you call simple form input helper, you should omit the as: :boolean option, and pass in the type through input_html ( otherwise it generates two set of check box input tag)

f.input :delivery_check, :input_html => { :type => "checkbox", :id => "delivery_check" }, wrapper: :my_checkbox, label: "Check if order was delivered"

It's just a simple problem that get me stuck for quite some time. Hope it will help others with similar problems.

Checkbox won't appear, when using materialize css framework and simple form in rails

1 Answers