Rails simple_form, move hint before input

ruby-on-rails, simple-form

Solution

You can modify the Inputs section default wrapper in `config/initializers/simple_form.rb`, from:

b.use :label_input
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }

to:

b.use :label
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
b.use :input

This section starts at line 42 in the default generated simple_form.rb

This will make individual checkboxes look a little odd when they have errors, so you will also want to make a version of the wrapper that is a duplicate of the original config and set it up just for use with the `boolean` input type. For example:

config.wrappers :checks, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    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
config.wrapper_mappings = { boolean: :checks }

Problem

Is there anyway to move the hint component so it appears before the input? The components currently appear, in the following order: label, input, hint, error. I've tried adding the :components option but that is not working. Here's my code: ``` <%= f.input :content, :components => [:label, :hint, :input], :as => :text, hint: 'Please 1) include your exact copy here, 2) upload your copy document in the next step, or 3) describe any content services to include in our estimate.', required: true, :label => "Copy" %> ```

Original source