Skip to content

Instantly share code, notes, and snippets.

@tommarshall
Forked from clyfe/simple_form.rb
Created August 22, 2013 14:58
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save tommarshall/6308327 to your computer and use it in GitHub Desktop.
Save tommarshall/6308327 to your computer and use it in GitHub Desktop.
Bootstrap3 compatible simple_form initializer (with consistent Bootstrap 3 classes)
# http://stackoverflow.com/questions/14972253/simpleform-default-input-class
# https://github.com/plataformatec/simple_form/issues/316
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.use :label
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
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.use :label
b.wrapper tag: 'div', class: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-append' do |append|
append.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
# 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
@cMack87
Copy link

cMack87 commented Oct 5, 2013

Is this supposed to handle checkboxes / radios as well? I may have missed something but in my app I had to add the following to avoid "Couldn't find wrapper with name checkbox" :

config.wrappers :checkbox, tag: 'div', class: "form-group", error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'checkbox' do |input|
input.wrapper tag: 'label' do |checkbox|
checkbox.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
end
end

Copy link

ghost commented Nov 13, 2013

Thanks! Perfect.

@jgillman
Copy link

jgillman commented Dec 5, 2013

👍 Super helpful! Thank you for making this

@meliborn
Copy link

meliborn commented Dec 8, 2013

Error messages aren't red.

@meliborn
Copy link

meliborn commented Dec 8, 2013

Input error must be a label with control-label class

@jxdx
Copy link

jxdx commented Dec 17, 2013

None of my alerts have color, success messages aren't green, error messages aren't red. Can someone please explain how to fix this? Thanks

@TechFounder
Copy link

Has anyone tried this version to see if it fixes alert colors?
https://gist.github.com/tokenvolt/6599141

@hail2skins
Copy link

I needed this today to fix the issue with the remember me checkbox as well as radio_buttons and check_boxes. Was surprised this was still an issue, but seems to be. Worked for me so thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment