Kendo UI 验证消息破坏引导布局答案

【问题标题】：Kendo UI validation message breaks bootstrap layoutKendo UI 验证消息破坏引导布局
【发布时间】：2015-05-15 19:23:59
【问题描述】：

我有一个使用引导程序设计的用于收集用户信息的表单。我正在使用 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>

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

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

这是复制问题的剑道道场http://dojo.telerik.com/ihANu。全屏看http://runner.telerik.io/fullscreen/ihANu

谢谢。

【问题讨论】：

能否也提供错误消息的html？（或者是JS生成的？）
它由 Kendo UI 验证器生成。我已经用剑道道场更新了帖子。

标签： css twitter-bootstrap kendo-ui kendo-validator

【解决方案1】：

您可以尝试将其从正常流程中取出并将其覆盖在屏幕顶部，这样它就不会通过添加 position: absolute 来干扰其他元素

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

Demo in Dojo

【讨论】：

太棒了.. 像魅力一样工作。非常感谢您的快速帮助。

【解决方案2】：

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

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

【讨论】：