Question

I have two different forms on a website that I'm working on and I'm not sure what's causing the problem exactly.

Form 1: http://www.escalateinternet.com/contact

Form 2: http://portal.escalateinternet.com/request-call.php

In form 1 if you click the button to submit (don't enter any information), you see an error message that shows the way I want it to.

But, in form 2 if you click the button to submit (don't enter any information), you see an error message but it shows quite a bit higher that the one in form 1 does.

I can't seem to figure out if CSS, Javascript, or HTML is actually causing this to happen though. Can anyone help me out?

No correct solution

OTHER TIPS

The only quick solution i could find for you is to add

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

to your first form div errorcontainer

so it looks like

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

yes sometimes you can do that too.

The other answer given here does address your problem, though it's a bit of a one-off solution, and could prove to be a hassle to apply if you continue to encounter this problem in the future. (To be honest, I'm generally not a fan of inline styles, since they blur the lines between presentation and content.)

The problem actually lies with the <textarea> located just above the error message. If you take a look at them with web developer tools, you'll notice on the working on, there is a margin-bottom of 20px applied to it - not so with the one that isn't working. This margin is the result of styling applied to .slickwrap input, textarea, select in "slickform-standalone.css". Without this margin-bottom, the error message appears closer to the bottom of the <textarea>, causing it to appear "too high".

This is due to your inclusion of "bootstrap.css" in the second webpage. The default styles applied to a <textarea> in the BootStrap framework include margin:0, overwriting the margin-bottom of 20px from earlier.

So, how to address this? An easy, and probably best solution would be to pull out "bootstrap.css" from the second page. Since you don't have it on both pages, I'm going to assume it isn't fundamental to the design of the website. If you do need specific styles from it for a particular element on that webpage, isolate those styles and only include them. It's not a good idea to include an entire CSS framework on a webpage for just a few elements, since it's a lot of extra stuff to send to the client, and unexpected styles (such as the one you're seeing here) are bound to cause issues.

If you're really set on keeping "bootstrap.css" in there, though, you can simply apply a style to the class on both <textarea> elements (or just modify its existing definition):

.largertextarea{
    margin-bottom: 20px;
}

This will override the BootStrap style that is causing the issues, so your <textarea> elements will continue to have the 20px below them, and will push down the error message consistently.

Hope this helps! Let me know if you have any questions.

EDIT: Don't forget to remove the negative margin-bottom applied inline to your error message, or your error messaging will still appear off.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top