-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#app/inputs/collection_check_boxes_input.rb | |
class CollectionCheckBoxesInput < SimpleForm::Inputs::CollectionCheckBoxesInput | |
def item_wrapper_class | |
"checkbox-inline" | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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" } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
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'}}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Rather than overwriting item_wrapper_class to always use the inline version, I'd recommend:
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).