Skip to content

Instantly share code, notes, and snippets.

@jwo
Created August 15, 2013 15:50
Show Gist options
  • Save jwo/6241963 to your computer and use it in GitHub Desktop.
Save jwo/6241963 to your computer and use it in GitHub Desktop.
Simple Form 3 & Bootstrap 3
#config/initializers/remove-this-sf_bs3_inputs.rb
#Credit: https://github.com/rafaelfranca/simple_form-bootstrap/issues/26#issuecomment-22435894
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
# Updated to bootstrap 3
SimpleForm.setup do |config|
config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.use :input
b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
b.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
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: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-prepend' 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-block' }
end
end
config.wrappers :append, 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: 'controls' do |input|
input.wrapper tag: 'div', class: 'input-append' 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-block' }
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
@bcackerman
Copy link

Do you have an example of how to use the prepend?

@marekstachura
Copy link

@bcackerman that's how I'm using prepend:

<%= f.input :email, wrapper: :prepend do %>
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <%= f.input_field :email, :autofocus => true %>
<% end %>

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