联系人表格确认消息显示过高？

Question

我正在工作的网站上有两种不同的表格，我不确定是什么导致了问题。

表格1： http ： //www.escalateinternet.com/contact

表格2： http ： //portal.escalateinternet.com/request-call.php

在表单1中，如果您单击提交按钮（不输入任何信息），则会看到一条错误消息，显示了我想要的方式。

但是，在表格2中，如果您单击提交按钮（不输入任何信息），则会看到一条错误消息，但显示的内容比表格1中的错误消息要高得多。

我似乎无法弄清楚CSS，Javascript或HTML是否实际上导致了这种情况的发生。 谁能帮我吗？

Answer 1

我能为您找到的唯一快速解决方案是添加

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

到您的第一个表格div errorcontainer

所以看起来

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

是的，有时您也可以这样做。

Answer 2

此处给出的另一个答案确实解决了您的问题，尽管这是一个一次性的解决方案，并且如果您将来继续遇到此问题，可能会被证明很麻烦。 （说实话，我通常不喜欢嵌入式样式，因为它们模糊了表示和内容之间的界限。）

问题实际上出在错误消息上方的<textarea>所在。 如果您使用Web开发人员工具查看它们，就会注意到正在使用该工具，其中有一个20px的margin-bottom -不能使用的margin-bottom则不然。 此边距是样式应用于.slickwrap input, textarea, select在“ slickform-standalone.css”中选择。 如果没有该margin-bottom ，错误消息将显示在<textarea>的底部附近，从而使其显得“过高”。

这是由于您在第二个网页中包含了“ bootstrap.css”。 在BootStrap框架中应用于<textarea>的默认样式包括margin:0 ，从之前覆盖20px的margin-bottom 。

那么，如何解决呢？ 一个简单的，也许是最好的解决方案是从第二页中拉出“ bootstrap.css”。 由于您在两个页面上都没有，所以我假设它不是网站设计的基础。 如果确实需要该网页上特定元素的特定样式，请隔离这些样式并仅包含它们。 在网页上仅包含几个元素的整个CSS框架并不是一个好主意，因为它会发送给客户端很多额外的东西，并且意外的样式（例如您在此处看到的样式）必然会绑定到引起问题。

但是，如果您确实打算在其中保留“ bootstrap.css”，则可以将样式直接应用于两个<textarea>元素上的类（或仅修改其现有定义）：

.largertextarea{
    margin-bottom: 20px;
}

这将覆盖引起问题的BootStrap样式，因此您的<textarea>元素将继续在其下方具有20px的位置，并将始终向下推送错误消息。

希望这可以帮助！ 如果您有任何疑问，请告诉我。

编辑：别忘了将内联的负margin-bottom应用于错误消息，否则您的错误消息仍会出现。