Сообщения об ошибке разбивает раскладку при отображении

У меня есть следующие поля на моей страницеСообщения об ошибке разбивает раскладку при отображении

enter image description here

который строится с помощью следующего HTML

<div style="margin-bottom: 10px" class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    @Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" }) 
</div>

довольно основного материала, я в настоящее время имеет форму проверки JQuery встроенный в мое приложение, которое выглядит так:

Я удалил все поля, кроме этого.

$('#registrationForm').validate({ 
    rules: { 
     "Username": "required", 

    }, 
    messages: { 
     "Username": "Please enter your chosen Username", 

    } 
});

Когда я оставить поле пустым и нажмите отправить это выглядит как этот

enter image description here

Как вы можете видеть, высота пользователя glyphicon была увеличена, чтобы обслужить сообщение об ошибке.

Визуализированное HTML выглядит следующим образом:

<div class="input-group" style="margin-bottom: 10px"> 
<span class="input-group-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
</span> 
<input id="Username" class="form-control" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25"> 
</div>

Можно ли предположить, почему это может происходить?

Update

Это то, что делают, когда отображается сообщение об ошибке

<div class="input-group" style="margin-bottom: 10px"> 
<span class="input-group-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
</span> 
<input id="Username" class="form-control error" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25"> 
<label class="error" for="Username">Please enter your chosen Username</label> 
</div>

enter image description here

** Обновление после добавления дополнительных стилей к .error класс **

enter image description here

источник

2015-06-12 Code Ratchet

Вы можете осмотреть элемент и показать '' что генерируется? –

Существует дополнительный <span>, который генерируется, когда вы это делаете! Думаю, это должно быть .error. Просто дайте ему position: absolute;.

.error {position: absolute; right: 0; width: 100%; bottom: -1em;}

Или просто взять текст ошибки из .input-group:

<div style="margin-bottom: 10px" class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
</div> 
@Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })

источник

2015-06-12 10:21:57

Я добавил положение абсолютное, но сообщение об ошибке появилось в той же строке, что и текстовое поле, но в конце, и все было сжато (не читалось). Если я использую HTML, который вы предоставили, пользователь глификон больше не находится рядом с полем, вместо этого он отображается сверху. Который не то, что я хочу –

@ScottAtkinson Пожалуйста, обновите сгенерированный HTML, проверив там элемент. Мы можем легко двигаться вперед. Помните, что вам нужно использовать только одну, либо абсолютную позицию, либо HTML за пределами div. –

Я обновил стиль .error, чтобы иметь абсолютное положение –

Добавить следующий стиль в сообщении об ошибке

position : absolute

источник

2015-06-12 10:34:44 Peru

Сообщения об ошибке разбивает раскладку при отображении

ответ

Смежные вопросы