2

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

谢谢你。

4

2 回答 2

2

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

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

例子

Dojo 中的演示

于 2015-05-15T19:49:56.890 回答
2

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

<span class="k-invalid-msg" data-for="input-id"></span>
于 2015-05-16T18:30:35.187 回答