Skip to content

Instantly share code, notes, and snippets.

@XORwell
Last active September 3, 2018 05:15
Show Gist options
  • Save XORwell/6899790 to your computer and use it in GitHub Desktop.
Save XORwell/6899790 to your computer and use it in GitHub Desktop.
bootstrap 3 simple_form wrappers
# http://stackoverflow.com/a/18684021
# Bootstrap 3
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.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', :class => 'input-group' do |input|
input.use :input, class: 'form-control'
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 :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
b.use :html5
b.use :placeholder
b.wrapper :tag => 'div', :class => 'checkbox' do |ba|
ba.use :label_input #, :wrap_with => { :class => 'checkbox inline' }
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
end
end
#example:
# = simple_form_for (@person), :wrapper => :form_horizontal, :html => {:class => 'form-horizontal'} do |f|
# = f.input :firstname
config.wrappers :form_horizontal, tag: 'div', class: 'form-group' do |b|
b.use :placeholder
b.use :html5
b.wrapper :tag => 'label', :class => 'col-lg-2 control-label' do |l|
l.use :label_text
end
b.use :input, :wrap_with => {:class => 'col-lg-10'}
end
config.default_wrapper = :bootstrap3
end
@carloswherbet
Copy link

Thank you !

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