Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
@andrezimpel

This comment has been minimized.

Copy link

andrezimpel commented Sep 11, 2013

It just works! Thanks a lot man!

@Nerian

This comment has been minimized.

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

This comment has been minimized.

Copy link

Numerico commented Nov 29, 2013

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

config.label_class = 'control-label'
@bmcdaniel11

This comment has been minimized.

Copy link

bmcdaniel11 commented Mar 11, 2014

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
You can’t perform that action at this time.