Kendo UI 验证消息中断 bootstrap 布局

Question

我有一个使用 bootstrap 设计的用于收集用户信息的表格。我正在使用 Kendo UI 验证来验证用户输入。

这是表格的一部分。

Html 为表格的第一行。

<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>

如果没有验证消息，布局一切正常。但是当有验证消息时布局变得丑陋。

如何使验证消息跨越输入和加载项？如何使验证消息浮在控件之上，即使消息较长也不会影响旁边的控件？

这里是Kendo道场http://dojo.telerik.com/ihANu that replicates the issue. Look in full screen http://runner.telerik.io/fullscreen/ihANu

谢谢。

Answer 1

您可以尝试通过添加 position: absolute

将其从正常流程中取出并覆盖在屏幕顶部，这样它就不会干扰其他元素

.k-widget.k-tooltip-validation.k-invalid-msg {
  position: absolute;
  top: 100%;
  left: 0;
}

Demo in Dojo

Answer 2

KyleMit 的回答很好，也是一种方法。我更喜欢使用验证器消息自定义定位，它是 Kendo UI 验证器功能。您可以使用单行 html 将验证器消息放置在您想要的任何位置。只需为 data-for 属性放置输入 id 即可将其连接到正确的输入元素。

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

Kendo UI 验证消息中断 bootstrap 布局

Kendo UI validation message breaks bootstrap layout

css

twitter-bootstrap

kendo-ui

kendo-validator