Bootstrap input-group-addon durandal knockout validation

Question

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>

Answer 1

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