Excess padding / margin in Chrome

  • Profile Image
    benzy16
    Asked 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.

     

    .form-line {

    padding-bottom: -1px;

    padding-top: -1px;

    }

     

    .form-all {

    float:left;

    margin-top: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

    margin-bottom: 0px;}

     

    .form-submit-button {

    padding-bottom: 0px;

    margin-bottom: 0px;

    padding-top: 0px;

    margin-top: 0px; }

  • Profile Image
    aytekin
    Answered on February 28, 2014 at 10:54 AM

    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. 

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

  • Profile Image
    benzy16
    Answered on February 28, 2014 at 11:00 AM

    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!

  • Profile Image
    EliezerN
    Answered on February 28, 2014 at 01:35 PM

    @benzy16

    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.

    Thanks

  • Profile Image
    benzy16
    Answered on February 28, 2014 at 02:08 PM

    Just checked and its definatly still showing for me, cleared my cache as well so its not fixed yet.

    Thanks

  • Profile Image
    Mike_T
    Answered on February 28, 2014 at 04:24 PM

    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:

  • Profile Image
    benzy16
    Answered on March 04, 2014 at 07:26 AM

    It worked! But now IE has some extra padding! It can never be simple with browsers can it!

  • Profile Image
    jonathan
    Answered on March 04, 2014 at 08:30 AM

    Hi,

    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.

    .form-all{

    height: 670px !important;

    }

     

    Thanks.

  • Profile Image
    benzy16
    Answered on March 04, 2014 at 10:43 AM

    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

  • Profile Image
    pinoytech
    Answered on March 04, 2014 at 12:08 PM

    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.

    Thanks,

  • Profile Image
    benzy16
    Answered on March 04, 2014 at 12:11 PM

    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

  • Profile Image
    TitusN
    Answered on March 04, 2014 at 02:56 PM

    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