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

0

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

Форма 1: http://www.escalateinternet.com/contact

Форма 2: http://portal.escalateinternet.com/request-call.php

В форме 1, если вы нажмете кнопку для отправки (не вводите какую-либо информацию), вы увидите сообщение об ошибке, которое показывает способ, которым я хочу.

Но в форме 2, если вы нажмете кнопку для отправки (не вводите какую-либо информацию), вы увидите сообщение об ошибке, но оно показывает немного выше, чем тот, что указан в форме 1.

Кажется, я не могу понять, действительно ли CSS, Javascript или HTML заставляют это случиться. Может кто-нибудь мне помочь?

Теги:

2 ответа

0

Другой ответ, приведенный здесь, решает вашу проблему, хотя это немного одноразовое решение и может оказаться суматохой для применения, если вы продолжите сталкиваться с этой проблемой в будущем. (Честно говоря, я вообще не поклонник встроенных стилей, так как они размывают линии между презентацией и контентом.)

Проблема заключается в том, что <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 приложенное в строке к вашему сообщению об ошибке, или ваш обмен сообщениями по-прежнему будет отключен.

0

Единственное быстрое решение, которое я могу найти для вас, - это добавить

style="margin-bottom: -40px;"

к вашей первой форме div errorcontainer

так выглядит

<div class="errorcontainer" style="margin-bottom: -40px;"></div>

да иногда вы тоже можете это сделать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню