make hint span wrapper div in simple_form horizontal-form?

Question

When using the horizontal-form in simple_form 3, I've got a f.input :name, hint: "this is a really long hint" the hint will display under the input field and wrap to whatever width the input is constrained to.

enter image description here

How do I make the hint display under both the label and the input but still within the form-group div that is around the label and the input?

This is how one of my fields is currently rendered (as shown in the screenshot above):

<div class="form-group string optional scenario_answers_value">
  <label class="string optional col-xs-8 control-label" for="scenario_answers_attributes_14_value">Customer's Normal Oil Change Interval</label>
  <div class="col-xs-4">
    <input class="string optional form-control" data-original-title="hrs" data-placement="bottom" data-toggle="tooltip" data-trigger="focus" id="scenario_answers_attributes_14_value" name="scenario[answers_attributes][14][value]" rel="tooltip" type="text">
    <p class="help-block">Most LT manufacturers recommend 250 hours because of wet stacking problems from the engine not running under a load.</p>
  </div>
</div>

How about just remove hint from input helper and put in in div below label and input? — Maxim
I'd like to preserve the simplicity of the f.input :fieldname, hint: hinttext call. I'm hoping someone can tell me how to tweak the existing code in the simple_form.rb initializer or the simple_form_bootstrap.rb initializer using their wrappers api. — marvin

Viktor Vsk Viktor Vsk · Accepted Answer · 2015-03-07T21:14:06

You force your form-group to render with bootstrap grid. 8/12 of row for a label and 4/12 for input field. In this way, you can`t use hint as you want. You need something like:

`

<div class='form-group'> 
  <div class='row'>
    <div class='col-xs-8'>
      <label>
    </div>
    <div class='col-xs-4'>
      <input class='form-control'>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-12'>
     <p class='hint'></p>
    </div>
  </div>
</div>

Or you could try to style hint with CSS, but it is not the best way. Also, you could provide your erb\haml\slim markup for more useful answers.

make hint span wrapper div in simple_form horizontal-form?

1 Answers