Simple_form: How to use bootstrap input_group

[sarunw]

Precheck

• Do not use the issues tracker for help or support, try Stack Overflow.
• For bugs, do a quick search and make sure the bug has not yet been reported
• Finally, be nice and have fun!

Environment

• Ruby 2.5.1
• Rails 5.2.1
• Simple Form 4.0.1

Current behavior

I start with <%= simple_form_for app, wrapper: :input_group do |f| %> and get Couldn't find wrapper with name input_group, so I uncomment

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'form-control-label'
    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
      ba.optional :prepend
      ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
      ba.optional :append
    end
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

in simple_form_bootstrap.rb

And get undefined methodappend' for class SimpleForm::Inputs::StringInput' instead.

Problem on this <%= f.input :subdomain, append: "example.com" %>

Expected behavior

Should show input-group append

[justinlyman]

@sarunw I am having this same issue, did you find a solution?

[mdeering]

@justinlyman _and whoever else who ends up here in the future_

For prepend and append you need to add this custom component from the sample app also.

https://github.com/rafaelfranca/simple_form-bootstrap/blob/5a876154e902126e0d5e2c546f07da90c6c37c6c/lib/components/input_group_component.rb

https://github.com/plataformatec/simple_form#custom-components

undefined method `prepend' for class `SimpleForm::Inputs::StringInput'

[archonic]

I re-ran the simple_form bootstrap generator and found that @mdeering's solution was no longer working. Keep in mind this line at the top of config/initializers/simple_form_bootstrap.rb needs to be uncommented:

# Uncomment this and change the path if necessary to include your own
# components.
# See https://github.com/plataformatec/simple_form#custom-components
# to know more about custom components.
Dir[Rails.root.join('lib/components/**/*.rb')].each { |f| require f }

[JeremiahChurch]

tagging on to @archonic s note - you'll also need to uncomment the config.wrappers :input_group block in simple_form_bootstrap.rb

  # Input Group - custom component
  # see example app and config at https://github.com/rafaelfranca/simple_form-bootstrap
  # config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
  #   b.use :html5
  #   b.use :placeholder
  #   b.optional :maxlength
  #   b.optional :minlength
  #   b.optional :pattern
  #   b.optional :min_max
  #   b.optional :readonly
  #   b.use :label
  #   b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
  #     ba.optional :prepend
  #     ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
  #     ba.optional :append
  #   end
  #   b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
  #   b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  # end