-
-
Save adamico/6510093 to your computer and use it in GitHub Desktop.
#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" } |
# 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 |
It's better to include :hint and :error into right_column wrapper for :bootstrap3_horizontal:
b.use :label
b.wrapper :right_column, tag: :div do |component|
component.use :input
component.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
component.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
Else, hints and errors will not appear under input with right offset.
Rather than overwriting item_wrapper_class to always use the inline version, I'd recommend:
class CollectionCheckBoxesInput < SimpleForm::Inputs::CollectionCheckBoxesInput
def item_wrapper_class
nested_boolean_style? ? "checkbox-inline" : super
end
end
This way, you can set :boolean_style to something else than :nested to render checkbox collections (as done by simple_form's association for instance).
Creating top-level objects TextInput
etc doesn't play nicely when using simple_form and formtastic in one project. So I created a solution that directly overrides simple form's internal mappings (which is a bad hack because these APIs might change):
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
# Instead of creating top-level custom input classes like TextInput, we wrap it into a module and override
# mapping in SimpleForm::FormBuilder directly
#
SimpleFormBootstrapInputs = Module.new
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
new_class = SimpleFormBootstrapInputs.const_set(input_type, Class.new(superclass) do
def input_html_classes
super.push('form-control')
end
end)
# Now override existing usages of superclass with new_class
SimpleForm::FormBuilder.mappings.each do |(type, target_class)|
if target_class == superclass
SimpleForm::FormBuilder.map_type(type, to: new_class)
end
end
end
I had to change the group wrapper to the following so that you can set its right_column html:
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.wrapper :right_column, tag: :div do |component|
component.use :input, wrap_with: { class: "input-group" }
component.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
component.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
end
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.
@anthonykaras you just have that in example
defaults: { right_column_html: { class: 'col-xs-6' }, label_html: {class: 'col-xs-2'}}
I removed line 7 from simple_form.rb I have a form where I want the user to upload a picture. Adding
form-control
to file inputs is not necessary in bootstrap 3. http://getbootstrap.com/css/#forms-example