Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 3 simple form initializer
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
new_class = Class.new(superclass) do
def input_html_classes
super.push('form-control')
end
end
Object.const_set(input_type, new_class)
end
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
config.boolean_style = :nested
config.wrappers :bootstrap3, tag: 'div', class: 'form-group', error_class: 'has-error',
defaults: { input_html: { class: 'default_class' } } do |b|
b.use :html5
b.use :min_max
b.use :maxlength
b.use :placeholder
b.optional :pattern
b.optional :readonly
b.use :label_input
b.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
b.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
config.wrappers :prepend, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-group' do |prepend|
prepend.use :label , class: 'input-group-addon' ###Please note setting class here fro the label does not currently work (let me know if you know a workaround as this is the final hurdle)
prepend.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
end
config.wrappers :append, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-group' do |prepend|
prepend.use :input
prepend.use :label , class: 'input-group-addon' ###Please note setting class here fro the label does not currently work (let me know if you know a workaround as this is the final hurdle)
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
end
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
# Form extensions
b.use :html5
# Form components
b.wrapper tag: :label do |ba|
ba.use :input
ba.use :label_text
end
b.use :hint, wrap_with: { tag: :p, class: "help-block" }
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end
# Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
# Check the Bootstrap docs (http://getbootstrap.com/)
# to learn about the different styles for forms and inputs,
# buttons and other elements.
config.default_wrapper = :bootstrap3
end
@jmcbri

This comment has been minimized.

Copy link

jmcbri commented Dec 28, 2013

THANKS.

Haven't tested at all but with 30 seconds work, my forms now look a bit more reasonable under TBS 3!

@pedrosnk

This comment has been minimized.

Copy link

pedrosnk commented Jan 4, 2014

nice work dude... thanks to save me the time. [=

@xlozinguez

This comment has been minimized.

Copy link

xlozinguez commented Jan 13, 2014

You're the man... many thanks!

@Genkilabs

This comment has been minimized.

Copy link

Genkilabs commented Jan 17, 2014

Working great for me too. Thank you.

@Zhomart

This comment has been minimized.

Copy link

Zhomart commented Jan 21, 2014

Thanks!

I also added this line: config.button_class = 'btn btn-default'

@alxcrrll

This comment has been minimized.

Copy link

alxcrrll commented Jan 21, 2014

Awesome. Thanks!

@korun

This comment has been minimized.

Copy link

korun commented Jan 22, 2014

Thanks for this!
I think better use: config.input_class = 'form-control' instead of:

inputs = %w[
...
]
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
# . . .
Object.const_set(input_type, new_class)
end

isn't it?

@cmartin81

This comment has been minimized.

Copy link

cmartin81 commented Jan 22, 2014

Thanks! I have also made another wrapper for horizontal-forms:

 config.wrappers :bootstrap3_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error',
                  defaults: { input_html: { class: 'form-group default_class' } } do |b|

    b.use :html5
    b.use :min_max
    b.use :maxlength
    b.use :placeholder

    b.optional :pattern
    b.optional :readonly

    b.use :label,  class: 'col-sm-5 control-label'

    b.wrapper tag: 'div', class: 'col-sm-7' do |input_block|
      input_block.use :input
      input_block.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
    end
    b.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
  end

And to use it you can type:

= simple_form_for @abc, :wrapper => :bootstrap3_horizontal, :html => { :class => 'form-horizontal' } do |form|
@cpm

This comment has been minimized.

Copy link

cpm commented Feb 11, 2014

For what it's worth, the initializer raised errors for me with ruby 1.9.2.

Monkey patching the original classes worked for me:

inputs.each do |input_type|
  superclass = "SimpleForm::Inputs::#{input_type}".constantize

  superclass.class_eval do
    def input_html_classes_with_form_control
      input_html_classes_without_form_control.push('form-control')
    end
    alias_method_chain :input_html_classes, :form_control
  end
end
@korun

This comment has been minimized.

Copy link

korun commented Feb 13, 2014

I think better use: config.input_class = 'form-control' instead of:
...

Radio and checkbox buttons!!! 😱
Don't use config.input_class = 'form-control' :)

@mrzasa

This comment has been minimized.

Copy link

mrzasa commented Mar 4, 2014

Great piece of code, really helpful. Could you add a license info so that we know how can we use it?

@sherwyngoh

This comment has been minimized.

Copy link

sherwyngoh commented Mar 21, 2014

Thank you very much, works well

@dickyblue

This comment has been minimized.

Copy link

dickyblue commented Mar 23, 2014

Thanks. This is really awesome.

@cmartin81 for some reason, the label is to the right of the input form? Is that what you get too?

@jholl

This comment has been minimized.

Copy link

jholl commented Mar 27, 2014

@dickyblue, I had same problem and couldn't get

b.use :label, class: 'col-sm-5 control-label'

to style correctly in boostrap3_horizontal.

A different gist ended up helping me more, notice that defaults for label_html and right_column_html add the classes and are declared in the form partial simple_form_for not the initializer... surely fixes for these issues are simple to a seasoned ruby developer but I'm completely new on this so I found this gist more workable. https://gist.github.com/adamico/6510093

@peterkinmond

This comment has been minimized.

Copy link

peterkinmond commented Apr 16, 2014

@dickyblue i also had that problem. i updated @cmartin81's version slightly and added the error handling in the correct spot:

  config.wrappers :bootstrap3_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error',
                  defaults: { input_html: { class: 'form-group default_class' } } do |b|

    b.use :html5
    b.use :min_max
    b.use :maxlength
    b.use :placeholder

    b.optional :pattern
    b.optional :readonly

    b.use :label, wrap_with: { tag: 'div', class: 'col-md-2' }

    b.wrapper tag: 'div', class: 'col-md-10' do |input_block|
      input_block.use :input
      input_block.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input_block.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
    end
  end
@tokenvolt

This comment has been minimized.

Copy link
Owner Author

tokenvolt commented Apr 22, 2014

http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/ - Simple Form 3.1.0.rc1 with support to Bootstrap 3.

@padde

This comment has been minimized.

Copy link

padde commented May 27, 2014

This will unfortunately break Active Admin. However, the following approach works fine for me:

inputs = %w[
  CollectionSelectInput
  DateTimeInput
  FileInput
  GroupedCollectionSelectInput
  NumericInput
  PasswordInput
  RangeInput
  StringInput
  TextInput
]

inputs.each do |input_type|
  "SimpleForm::Inputs::#{input_type}".constantize.class_eval do
    alias_method :__input_html_classes, :input_html_classes
    define_method(:input_html_classes) do
      __input_html_classes.push('form-control')
    end
  end
end
@gurix

This comment has been minimized.

Copy link

gurix commented Aug 4, 2014

Thanks, this trick helped me. But I use

config.wrapper_mappings = { boolean: :checkbox }
config.wrappers :checkbox, tag: :div, class: 'checkbox', error_class: 'has-error' do |b|
  b.use :html5
  b.use :label_input

  b.use :hint,  wrap_with: { tag: :p, class: 'help-block' }
  b.use :error, wrap_with: { tag: :span, class: 'help-block text-danger' }
end

When I use

b.wrapper tag: :label do |ba|
  ba.use :input
  ba.use :label_text
end

the inputs adds me a label automatically and just prepends the plain text.

@sitthichai

This comment has been minimized.

Copy link

sitthichai commented Jun 26, 2016

Thanks you very much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.