-
-
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 |
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
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):