I've got a field to validate and knockout handles the validation of this element. Next I've got an input-group-addon which is getting out of bounds when the validation of knockout kicks in. I've been trying to look for a fix but I cannot find another that solves this.
The issue:
The code itself is pretty straightforward to be honest:
<div class="form-group" data-bind="validationElement: emailRepeated">
<label for="emailRepeated" data-bind="text: translate('EmailConfirm')">[Confirm your Email Address]</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control" id="emailRepeated" data-bind="value: emailRepeated" >
</div>
</div>
My knockout just has the extender like so:
self.emailRepeated.extend({ required: true, email: true, equal: self.email });
Anyone got any idea how I can keep the input addon to stay together with the input?
EDIT: Result HTML after validation:
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control has-error" id="emailRepeated" data-bind="value: emailRepeated" title="This is not a proper email address" data-orig-title="">
<span class="help-block" style="">This is not a proper email address</span>
</div>
You could use the errorClass configuration option to setup your own css class. Then its a matter of proper floating I guess to get your desired effect.
OK I think I found a solution. Try adding following CSS
.input-group .validationMessage {
display: table-caption;
caption-side: bottom;
}
That will format it as a new row (caption) of your table-style and position it at the bottom
Here is a fiddle for demonstration purposes
Update: second version of the fiddle