You could try taking it out of the normal flow and overlaying it ontop of the screen so that it didn't disrupt the other elements by adding position: absolute



    .k-widget.k-tooltip-validation.k-invalid-msg {
      position: absolute;
      top: 100%;
      left: 0;
    }

![Example][1]

[**Demo in Dojo**][2]


  [1]: http://i.stack.imgur.com/Hm97S.png
  [2]: http://dojo.telerik.com/ihANu/2

I have a form to collect user information which is designed using bootstrap. I am using Kendo UI validation for validating user input.

This is a portion of the form. 

![Layout with out validation message][1]

Html for the first line of the form.




    <div class="col-lg-4">
      <div class="form-group">
        <label for="FirstName">First Name:</label>
        <div class="input-group">
          <input type="text" id="FirstName" name="FirstName" class="form-control" placeholder="First name" />
          <span class="input-group-addon" id="FirstNameAddon">
            <input type="checkbox" id="unkFirstName" value="Unknown" />Unknown
          </span>
         </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="form-group">
        <label for="LastName">Last Name:</label>
        <div class="input-group">
          <input type="text" id="LastName" class="form-control" placeholder="Last name" />
            <span class="input-group-addon" id="LastNameAddon">
              <input type="checkbox" id="unkLastName" value="Unknown" /> Unknown
            </span>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="form-group">
        <label for="Initials">Initials:</label>
        <div class="input-group">
          <input type="text" id="Initials" class="form-control" placeholder="Initials" />
          <span class="input-group-addon" id="InitialsAddon">
            <input type="checkbox" id="unkInitials" value="Unknown" /> Unknown
          </span>
        </div>
      </div>
    </div>



Everything is fine with the layout if there is not validation message. But when there is a validation message layout goes ugly.

![Layout with validation message][2]

How can I make the validation message to span across both input and add-on? How to make the validation message to float on top of the controls so that it won't effect the controls next to it even if message is longer?

Here is the Kendo Dojo http://dojo.telerik.com/ihANu that replicates the issue. Look in full screen http://runner.telerik.io/fullscreen/ihANu

Thank you.

  [1]: http://i.stack.imgur.com/hYhRt.jpg
  [2]: http://i.stack.imgur.com/ct68A.jpg