Skip to content

Instantly share code, notes, and snippets.

@donnykurnia
Last active January 3, 2016 16:08
Show Gist options
  • Save donnykurnia/8486985 to your computer and use it in GitHub Desktop.
Save donnykurnia/8486985 to your computer and use it in GitHub Desktop.
simple_form 3.0.1 bootstrap 3 config and custom input.
<%%= simple_form_for(@<%= singular_table_name %>) do |f| %>
<%%= f.error_notification %>
<div class="form-inputs">
<%- attributes.each do |attribute| -%>
<%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
<%- end -%>
</div>
<div class="form-actions form-group">
<div class="col-sm-offset-3 col-sm-9">
<%%= f.button :submit %>
</div>
</div>
<%% end %>
class BootstrapBooleanInput < SimpleForm::Inputs::BooleanInput
def input
build_hidden_field_for_checkbox +
template.content_tag(:div, class: "checkbox") {
template.label_tag(nil) {
build_check_box_without_hidden_field + label_text
}
}
end
def label_input
input
end
def input_html_classes
classes = super
classes.delete('form-control')
classes
end
end
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
# Wrappers are used by the form builder to generate a
# complete input. You can remove any component from the
# wrapper, change the order or even add your own to the
# stack. The options given below are used to wrap the
# whole input.
config.wrappers :default, class: :input,
hint_class: :field_with_hint, error_class: :field_with_errors do |b|
## Extensions enabled by default
# Any of these extensions can be disabled for a
# given input by passing: `f.input EXTENSION_NAME => false`.
# You can make any of these extensions optional by
# renaming `b.use` to `b.optional`.
# Determines whether to use HTML5 (:email, :url, ...)
# and required attributes
b.use :html5
# Calculates placeholders automatically from I18n
# You can also pass a string as f.input placeholder: "Placeholder"
b.use :placeholder
## Optional extensions
# They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
# to the input. If so, they will retrieve the values from the model
# if any exists. If you want to enable the lookup for any of those
# extensions by default, you can change `b.optional` to `b.use`.
# Calculates maxlength from length validations for string inputs
b.optional :maxlength
# Calculates pattern from format validations for string inputs
b.optional :pattern
# Calculates min and max from length validations for numeric inputs
b.optional :min_max
# Calculates readonly automatically from readonly attributes
b.optional :readonly
## Inputs
b.use :label_input
b.use :hint, wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
end
# The default
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
config.wrappers :bootstrap, tag: 'div', class: 'control-group form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls col-sm-6' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
config.wrappers :bootstrap_boolean, tag: 'div', class: 'control-group form-group', error_class: 'has-error' do |b|
b.use :html5
b.wrapper tag: 'div', class: 'controls col-sm-offset-3 col-sm-9' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
config.wrappers :prepend, tag: 'div', class: "control-group form-group", error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls col-sm-6 input-group' do |input|
input.wrapper tag: 'div', class: 'input-group-addond' do |prepend|
prepend.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
end
end
config.wrappers :append, tag: 'div', class: "control-group form-group", error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper tag: 'div', class: 'controls col-sm-6 input-group' do |input|
input.wrapper tag: 'div', class: 'input-group-addon' do |append|
append.use :input
end
input.use :hint, wrap_with: { tag: 'span', class: 'help-block' }
input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
end
end
# Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
# Check the Bootstrap docs (http://twitter.github.com/bootstrap)
# to learn about the different styles for forms and inputs,
# buttons and other elements.
config.default_wrapper = :bootstrap
end
@donnykurnia
Copy link
Author

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