У меня есть две разные формы на веб-сайте, над которым я работаю, и я не уверен, что именно вызывает проблему.
Форма 1: http://www.escalateinternet.com/contact
Форма 2: http://portal.escalateinternet.com/request-call.php
В форме 1, если вы нажмете кнопку для отправки (не вводите какую-либо информацию), вы увидите сообщение об ошибке, которое показывает способ, которым я хочу.
Но в форме 2, если вы нажмете кнопку для отправки (не вводите какую-либо информацию), вы увидите сообщение об ошибке, но оно показывает немного выше, чем тот, что указан в форме 1.
Кажется, я не могу понять, действительно ли CSS, Javascript или HTML заставляют это случиться. Может кто-нибудь мне помочь?
Другой ответ, приведенный здесь, решает вашу проблему, хотя это немного одноразовое решение и может оказаться суматохой для применения, если вы продолжите сталкиваться с этой проблемой в будущем. (Честно говоря, я вообще не поклонник встроенных стилей, так как они размывают линии между презентацией и контентом.)
Проблема заключается в том, что <textarea>
находится чуть выше сообщения об ошибке. Если вы посмотрите на них с помощью инструментов веб-разработчика, вы заметите, что при работе над ним применяется margin-bottom
с порами 20px, а не тот, который не работает. Эта маржа является результатом стиля, применяемого к .slickwrap input, textarea, select
в "slickform-standalone.css". Без этого margin-bottom
сообщение об ошибке появляется ближе к нижней части <textarea>
, в результате чего он будет казаться "слишком высоким".
Это связано с тем, что вы включили "bootstrap.css" во вторую веб-страницу. Стили по умолчанию, применяемые к <textarea>
в структуре BootStrap, включают в себя margin:0
, переписывая margin-bottom
20px от ранее.
Итак, как это решить? Легким и, вероятно, лучшим решением было бы вытащить "bootstrap.css" со второй страницы. Поскольку у вас его нет на обеих страницах, я собираюсь предположить, что это не является основополагающим для дизайна веб-сайта. Если вам нужны конкретные стили для определенного элемента на этой веб-странице, изолируйте эти стили и включите их только. Не рекомендуется включать всю CSS-структуру на веб-странице всего лишь из нескольких элементов, поскольку для отправки клиенту требуется множество дополнительных материалов, а неожиданные стили (например, тот, который вы видите здесь) привязаны к вызывают проблемы.
Если вы действительно настроены на сохранение "bootstrap.css" там, вы можете просто применить стиль к классу на обоих элементах <textarea>
(или просто изменить существующее определение):
.largertextarea{
margin-bottom: 20px;
}
Это переопределит стиль BootStrap, вызывающий проблемы, поэтому ваши элементы <textarea>
будут по-прежнему иметь 20px ниже их и будут последовательно вытеснять сообщение об ошибке.
Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.
EDIT: Не забудьте удалить отрицательное значение " margin-bottom
приложенное в строке к вашему сообщению об ошибке, или ваш обмен сообщениями по-прежнему будет отключен.
Единственное быстрое решение, которое я могу найти для вас, - это добавить
style="margin-bottom: -40px;"
к вашей первой форме div errorcontainer
так выглядит
<div class="errorcontainer" style="margin-bottom: -40px;"></div>
да иногда вы тоже можете это сделать.