CODEWITHSUNDEEP
ruby-on-railssimple-form
marvin
marvin

Reputation: 479

make hint span wrapper div in simple_form horizontal-form?

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>

Upvotes: 0

Views: 953

Answers (1)

Viktor Vsk
Viktor Vsk

Reputation: 327

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.

Upvotes: 1

Related Questions