Do you think there may be an issue with the FormValidation package, or am I overlooking something?
Upon testing a standard Bootstrap page, such as the "Stacked Form" example from this site, the form validates and displays icons correctly.
https://i.sstatic.net/0mgRZ.png
However, upon making modifications like adding 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>
The icon appears to be out of place:
https://i.sstatic.net/ZpVOK.png
Any adjustments to font-size or label styling seem to exacerbate the issue:
<style>
body {
font-size: 14px;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 0px;
font-weight: 700
}
.form-control {
font-size: 14px;
}
</style>
https://i.sstatic.net/AF7lG.png
If you have access to the FormValidation package, feel free to use this fiddle to replicate the issue yourself.
Once again, do you believe this is a flaw within the FormValidation package from formvalidation.io, or could there be something we're missing here?