FormValidation / formvalidation.io Bootstrap plug-in misplaces validation icons when the style is changed

Question

Is this a bug in the FormValidation package or am I missing something?

When I test a standard, vanilla, out-of-the-box Bootstrap page (say the "Stacked Form" example from this page), the form validates and places its icons properly.

But if I do anything else, say append an item to the input-group:

<div class="form-group">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>

Then the icon is misplaced:

It only gets worse if I change the font-size or adjust the labels at all:

<style>
  body {
    font-size: 14px;
  }
  label {
      display: inline-block;
      max-width: 100%;
      margin-bottom: 0px;
      font-weight: 700
  }
  .form-control {
    font-size: 14px;
  }
</style>

If you have the FormValidation package, you can use this fiddle as a starting point to test it yourself.

Again is this a bug in the FormValidation / formvalidation.io package or am I missing something?

Answer 1

To control the form size I can only advise you to use the dedicated Bootstrap classes: here or there

To place properly your icons you might again want to use your own classes.

.fv-plugins-bootstrap .form-group.row.three-char .fv-plugins-icon {
  right: 35px;
}

.fv-plugins-bootstrap .form-group.row.four-char .fv-plugins-icon {
  right: 45px;
}

<div class="form-group three-char">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>