Adding span next to input field with simple_form and custom wrapper

Question

I have custom wrapper:

  config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'

    b.use :input, class: 'form-control', wrap_with: { tag: 'div', class: 'input-group' }
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

And a form with input:

<%= simple_form_for @event do |f| %>
  ...
  <%= f.input :start_date, as: :string, wrapper: :input_group %>
  ...
<% end %>

It generates html:

<div class="form-group string optional event_start_date">
  <label class="string optional control-label" for="event_start_date">Start date</label>
  <div class="input-group">
    <input class="string optional form-control" type="text" name="event[start_date]" id="event_start_date">
  </div>
</div>

I'd like to add span, next to input element:

<div class="form-group string optional event_start_date">
  <label class="string optional control-label" for="event_start_date">Start date</label>
  <div class="input-group">
    <input class="string optional form-control" type="text" name="event[start_date]" id="event_start_date">
----> <span class="input-group-addon">TEST</span><----
  </div>
</div>

How can I do this ? (span text will be different for each input element)

dimitry_n dimitry_n · Accepted Answer · 2017-01-29T06:02:32

If anybody else is still looking for this, the hint helper does exactly that: adds a an element with arbitrary text next to the input field. In the example above it would look like this:

first change the hint wrapper element to span

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  ...
  b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  ...
end

and then call hint in your view:

<%= simple_form_for @event do |f| %>
  ...
  <%= f.input :start_date, as: :string, wrapper: :input_group, hint: 'TEST' %>
  ...
<% end %>

Adding span next to input field with simple_form and custom wrapper

1 Answers