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

例

道場でのデモ

于 2015-05-15T19:49:56.890 に答える
2

KyleMit の回答は適切であり、それを行う 1 つの方法です。Kendo UI バリデーター機能であるバリデーター メッセージのカスタム ポジショニングを使用することを好みます。html の 1 行を使用して、どこにでもバリデータ メッセージを配置できます。data-for 属性の入力 ID を配置して、正しい入力要素に接続するだけです。

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