Сообщение о проверке пользовательского интерфейса Kendo нарушает макет начальной загрузки

У меня есть форма для сбора информации о пользователе, разработанная с использованием начальной загрузки. Я использую проверку пользовательского интерфейса Kendo для проверки ввода пользователя.

Это часть формы.

Макет без сообщения проверки

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>

С макетом все в порядке, если нет сообщения о проверке. Но когда есть сообщение о проверке, макет становится уродливым.

Макет с сообщением о проверке

Как я могу сделать так, чтобы сообщение проверки охватывало как ввод, так и надстройку? Как сделать так, чтобы сообщение проверки всплывало поверх элементов управления, чтобы оно не влияло на элементы управления рядом с ним, даже если сообщение длиннее?

Вот кендо-додзё http://dojo.telerik.com/ihANu, в котором повторяется проблема. Просмотр в полноэкранном режиме http://runner.telerik.io/fullscreen/ihANu

Спасибо.


css twitter-bootstrap kendo-ui kendo-validator
person user3731783    schedule 15.05.2015    source источник
comment
Не могли бы вы также предоставить html для сообщения об ошибке? (Или это сгенерировано JS?)   -  person Starboy    schedule 15.05.2015
comment
он генерируется валидатором Kendo UI. Я обновил пост с Кендо Додзё.   -  person user3731783    schedule 15.05.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете попробовать убрать его из обычного потока и наложить поверх экрана, чтобы он не мешал другим элементам, добавив position: absolute

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

Пример

Демонстрация в Додзё

person KyleMit    schedule 15.05.2015
comment
Фантастический .. Работает как шарм. Большое спасибо за быструю помощь. - person user3731783; 15.05.2015

arrow_upward
2
arrow_downward

Ответ KyleMit хорош и один из способов сделать это. Я предпочитаю использовать пользовательское позиционирование сообщения валидатора, которое является функциональностью валидатора Kendo UI. Вы можете разместить сообщение валидатора где угодно, используя одну строку html. Просто поместите идентификатор ввода для атрибута data-for, чтобы подключить его к правильному элементу ввода.

<span class="k-invalid-msg" data-for="input-id"></span>
person Jarno Lahtinen    schedule 16.05.2015