Help text rendered inside input-group instead of form-group

[ehutzelman]

I believe this may be related to #434

When using help text along with a prepend, the following structure is generated with the help text being rendered inside the input-group:

<div class="form-group">
  <label>Label</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input class="form-control" type="text" name="my_field">
    <small class="form-text text-muted">help text here...</small> <!-- Original location -->
  </div>
</div>

This is causing rending issues at some widths with the help text being rendered to the right of the input field instead of below it. When moving the help text outside of the input-group and inside the outer form-group, the issue seems to be fixed and the help text renders underneath the input field as expected:

<div class="form-group">
  <label>Label</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input class="form-control" type="text" name="my_field">
  </div>
  <small class="form-text text-muted">help text here...</small>  <!-- Moved here -->
</div>

[lcreid]

Thanks for taking the time to report this. This is is a great bug report.

In v2.7 of bootstrap_form, aka the Bootstrap 3 version, the help text was not rendered if there was a validation error. No one currently active on bootstrap_form knows why for sure, although #284 (comment) gives a plausible explanation.

Whatever the reason, the code for help and error messages is basically in one method. We've been trying to minimize code changes as much as practical for the Bootstrap 4 version, so we rendered help and errors inside .input-group with the same method. This means they come out in the same place. #417 noted that the validation errors need to be inside the .input-group. Your report confirms that the help text has to be outside the .input-group. So something has to change. :-)

@ehutzelman would you like to take a shot at a PR for the .input-group case? If so, please comment here and/or assign the issue to yourself. If not, no worries. We like to encourage the community to contribute, but if you can't, we'll fix this sooner rather than later.

[ehutzelman]

Thanks for the quick response @lcreid. I've overbooked myself for March, but I could possibly pick this up in April if it remains unresolved. If anyone gets to it before then, more power to them :)

[lcreid]

No worries, @ehutzelman . @parkeryoung, if you're still looking to contribute, this might be a good bug to fix. Comment here or assign yourself near the top-right of this page so we know you're working on it.

[parkeryoung]

@lcreid I'll take a look at it.

Edit - I don't believe I can assign myself either.

[parkeryoung]

There is a fix for this here, hope it suffices.

[mattbrictson]

Fixed via #445

[ehutzelman]

Thanks for the quick fix on this one @parkeryoung, much appreciated.