CODEWITHSUNDEEP
csstwitter-bootstrapkendo-uikendo-validator
user3731783
user3731783

Reputation: 718

Kendo UI validation message breaks bootstrap layout

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

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

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.

Upvotes: 2

Views: 2327

Answers (2)

Jarno Lahtinen
Jarno Lahtinen

Reputation: 1703

KyleMit answer is good and one way to do it. I prefer using validator message custom positioning which is Kendo UI validator functionality. U can place validator message where ever u want using single line of html. Just place input id for data-for attribute to connect it to right input element.

<span class="k-invalid-msg" data-for="input-id"></span>

Upvotes: 2

KyleMit
KyleMit

Reputation: 29869

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

Demo in Dojo

Upvotes: 2

Related Questions