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 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 pedrosnk commented Jan 4, 2014

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

@xlozinguez

This comment has been minimized.

Copy link

@xlozinguez xlozinguez commented Jan 13, 2014

You're the man... many thanks!

@Genkilabs

This comment has been minimized.

Copy link

@Genkilabs Genkilabs commented Jan 17, 2014

Working great for me too. Thank you.

@Zhomart

This comment has been minimized.

Copy link

@Zhomart 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 alxcrrll commented Jan 21, 2014

Awesome. Thanks!

@korun

This comment has been minimized.

Copy link

@korun 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 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 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 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 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 sherwyngoh commented Mar 21, 2014

Thank you very much, works well

@dickyblue

This comment has been minimized.

Copy link

@dickyblue 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 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 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 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 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 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 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