JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Excess padding / margin in ChromeAsked by benzy16 on February 28, 2014 at 04:21 AM
I've created a form which fits into a box on my new responsive site (still on testing server) but in chrome it has a large space at the bottom of the form and I can't figure it out, my additional css is pretty clean as far as I can see i'm not sure why this happens as it seems to only be on chrome.
margin-top: 0px; }
float site form-line all
I see the problem and I opened a ticket about this.
For now, if it bothers you a lot you can use the iframe code instead. The height can be modified on the embed code.
Thank you for getting back so quickly
I have tried the iframe and unfortunately it appears to be unsuitable for our set up, it show up as an empty box so back to the drawing board!
Could you please confirm if you managed to fix the issue of the space at the bottom of your form? I checked it using chrome and it does not show the extra space anymore:
Inform us if you still need assistance with this inquiry.
Just checked and its definatly still showing for me, cleared my cache as well so its not fixed yet.
Can you please try the following iFrame to see if it fits right?
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40512894292356" frameborder="0" style="width:100%; height:670px; border:none;" scrolling="no"></iframe>
It looks fine when I test it with Chrome Browser Web Development Tools:
It worked! But now IE has some extra padding! It can never be simple with browsers can it!
Can you please tell us which version of IE browser you have encountered the issue.
I checked it on my IE9 browser and it appears like this
I can see that compared to Chrome view, the one in IE9 do have "a bit more" spacing at at the bottom. BUT you can agree that this is very minimal, which could be due to different browser's code.
You can also try injecting CSS code on the form to dictate a specific height for it.
Example, you can try CSS code like this.
height: 670px !important;
Any IE padding issues aside I now have the issue that the submit button does not show on my iPhone browser as the form box cuts off before it is shown
I now have the issue that the submit button does not show on my iPhone browser as the form box cuts off before it is shown
Request you to please create a separate thread with regards on your response for further assistance.
But this issue is caused by the iframe fix that Mike provided so we need a solution that appeases Chrome but doesn't cause an iPhone Safari issue
That is true.
This thread has an open ticket, and we want to resolve the problem aside from the workaround Mike provided.
We are all eager to help resolve it, but we cannot do it on this thread, but we have a reference, so opening a new thread will help us resolve the issue quicker.
When you open the ticket, please place this link in the question: http://www.jotform.com/answers/339998-Excess-padding-margin-in-Chrome#10