How To Fix FeedbackIcon Position For Bootstrap Input-Group Class

the best jQuery plugin to validate form fields designed to use with Bootstrap 3
 – BootstrapValidator.com

Using the latest Bootstrap and BootstrapValidator, I’ve found that when using input-groups to have a button and input text field mashed together that BootstrapValidator places the feedback icons in the wrong place (about 10px too high and outside of the input text field itself). Their website shows a fix but it didn’t work for me because it seems that any CSS applied for the FeedbackIcons was being overwritten after the fact.  Also, even if it wasn’t the case, their values were still off.  So what needed to be done was to force (using !important) the CSS on a higher-level DIV object and adjust where the feedback icons would show up.  Below is the result.

<Shameless Plug>Btw, if you like BootstrapValidator (which I highly recommend to folks!), check out my Validator plugin which checks a string for a specified amount of numbers, which is really useful for things like password complexity requirements.  You can find the plugin here: 01000101’s GitHub</Shameless Plug>

The cure (bold text)

The JavaScript

// BootstrapValidator init
$( "#testForm" ).bootstrapValidator({
 fields: {
  in_gapps_email: {
   validators: {
    notEmpty: {
     message: "The Google Apps E-Mail field is required and cannot be left blank"
    },
    emailAddress: {
     message: "This field requires a valid E-Mail Address"
    }
   }
  }
 }
});

The HTML

<form id="testForm" action="#" method="POST" enctype="multipart/form-data" role="form">
 <div class="container-fluid">
  <div class="row">
   <div class="col-lg-5 col-lg-offset-1 col-xs-6">
 
    <div class="form-group inputGroupContainer">
     <label for="in_gapps_email" class="control-label">Google Apps</label>
     <div class="input-group">
      <span class="input-group-addon">E-Mail</span>
      <input class="form-control"
       id="in_gapps_email"
       name="in_gapps_email"
       type="email" />
     </div>
 
    </div>
   </div>
  </div>
 </div>
</form>

The CSS

.inputGroupContainer .form-control-feedback { 
      top: 25px !important;
      right: 0px !important;
}