Skip to content

Instantly share code, notes, and snippets.

@adamico
Forked from mattclar/simple_form.rb
Last active April 28, 2020 15:12
Show Gist options
  • Star 63 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save adamico/6510093 to your computer and use it in GitHub Desktop.
Save adamico/6510093 to your computer and use it in GitHub Desktop.
This fork adds a custom horizontal form wrapper and merges append/prepend in a 'group' wrapper
#app/inputs/collection_check_boxes_input.rb
class CollectionCheckBoxesInput < SimpleForm::Inputs::CollectionCheckBoxesInput
def item_wrapper_class
"checkbox-inline"
end
end
#radio buttons with a column width override for the 'right_column' wrapper
= simple_form_for(user, wrapper: :bootstrap3_horizontal, defaults: {right_column_html: {class: "col-lg-3 col-md-3"},
label_html: {class: "col-lg-2 col-md-2"} }, html: {class: "form-horizontal", role: "form"}) do |f|
= f.input :email
= f.association :roles, as: :check_boxes, right_column_html: { class: "col-lg-10 col-md-10" }
#app/inputs/collection_radio_buttons_input.rb
class CollectionRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput
def item_wrapper_class
"radio-inline"
end
end
# 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 :bootstrap3_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error',
defaults: { input_html: { class: 'default-class '}, wrapper_html: { class: "col-lg-10 col-md-10"} } do |b|
b.use :html5
b.use :min_max
b.use :maxlength
b.use :placeholder
b.optional :pattern
b.optional :readonly
b.use :label
b.wrapper :right_column, tag: :div do |component|
component.use :input
end
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 :group, 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
b.use :input, wrap_with: { class: "input-group" }
b.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
b.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
config.default_wrapper = :bootstrap3
end
@anthonykarapetrides
Copy link

Thanks! I use form horizontal a lot and this has helped!

Has anyone managed to fix the label class issue?
I have set this in the initializer:
config.label_class = 'control-label'
I don't want to set this to 'control-label col-sm-2' because it will mess up all the other forms that are not horizontal.

@mochja
Copy link

mochja commented Jan 27, 2014

@anthonykaras you just have that in example

defaults: { right_column_html: { class: 'col-xs-6' }, label_html: {class: 'col-xs-2'}}

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