Last active
November 2, 2023 11:55
-
-
Save tokenvolt/6599141 to your computer and use it in GitHub Desktop.
Bootstrap 3 simple form initializer
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
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 | |
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b| | |
# Form extensions | |
b.use :html5 | |
# Form components | |
b.wrapper tag: :label do |ba| | |
ba.use :input | |
ba.use :label_text | |
end | |
b.use :hint, wrap_with: { tag: :p, class: "help-block" } | |
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" } | |
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 |
@dickyblue i also had that problem. i updated @cmartin81's version slightly and added the error handling in the correct spot:
config.wrappers :bootstrap3_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error',
defaults: { input_html: { class: 'form-group 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, wrap_with: { tag: 'div', class: 'col-md-2' }
b.wrapper tag: 'div', class: 'col-md-10' do |input_block|
input_block.use :input
input_block.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input_block.use :error, wrap_with: { tag: 'span', class: 'help-block has-error' }
end
end
http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/ - Simple Form 3.1.0.rc1 with support to Bootstrap 3.
This will unfortunately break Active Admin. However, the following approach works fine for me:
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
inputs.each do |input_type|
"SimpleForm::Inputs::#{input_type}".constantize.class_eval do
alias_method :__input_html_classes, :input_html_classes
define_method(:input_html_classes) do
__input_html_classes.push('form-control')
end
end
end
Thanks, this trick helped me. But I use
config.wrapper_mappings = { boolean: :checkbox }
config.wrappers :checkbox, tag: :div, class: 'checkbox', error_class: 'has-error' do |b|
b.use :html5
b.use :label_input
b.use :hint, wrap_with: { tag: :p, class: 'help-block' }
b.use :error, wrap_with: { tag: :span, class: 'help-block text-danger' }
end
When I use
b.wrapper tag: :label do |ba|
ba.use :input
ba.use :label_text
end
the inputs adds me a label automatically and just prepends the plain text.
Thanks you very much
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@dickyblue, I had same problem and couldn't get
b.use :label, class: 'col-sm-5 control-label'
to style correctly in boostrap3_horizontal.
A different gist ended up helping me more, notice that defaults for
label_html
andright_column_html
add the classes and are declared in the form partialsimple_form_for
not the initializer... surely fixes for these issues are simple to a seasoned ruby developer but I'm completely new on this so I found this gist more workable. https://gist.github.com/adamico/6510093