Skip to content

Instantly share code, notes, and snippets.

@mattclar
Forked from tommarshall/simple_form.rb
Last active December 21, 2015 13:58
Show Gist options
  • Save mattclar/6315955 to your computer and use it in GitHub Desktop.
Save mattclar/6315955 to your computer and use it in GitHub Desktop.
this is a simple form initializer that is ALMOST compatible with Bootstrap3 apart from a way to set the class of the label this would work perfectly
# 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.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
# 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
@Nerian
Copy link

Nerian commented Sep 16, 2013

I managed to add a custom class to a label. Like this:

class Labels < SimpleForm::Components::Labels
  def label_html_options
    label_html_classes = SimpleForm.additional_classes_for(:label) {
      [input_type, required_class, SimpleForm.label_class].compact
    }

    label_options = html_options_for(:label, label_html_classes)
    if options.key?(:input_html) && options[:input_html].key?(:id)
      label_options[:for] = options[:input_html][:id]
    end

    if options.key?(:label_html) && options[:label_html].key?(:class)
      label_options[:class] += options[:input_html][:class]
    end

    label_options
  end
end

# Then set the wrapper like this:

config.wrappers :bootstrap_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error',
      defaults: { input_html: { class: 'default_class' }, label_html: { class: 'control-label' } }

@Numerico
Copy link

Where would you put that code @Nerian ? Didn't work for me
What did work was just setting

config.label_class = 'control-label'

@bmcdaniel11
Copy link

To get this to work with ClientSideValidations, I had to change 'bootstrap3' on lines 32 and 78 to just be 'bootstrap'. I believe something in the ClientSideValidations gem is making 'bootstrap' the default wrapper, so referencing it with the SimpleForm setup makes it work. Otherwise, I was getting a javascript error on validation of my fields.

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