My form is getting cut off on the right side when I shrink the page down

  • DudleyDigitalWorks
    Asked on August 16, 2018 at 6:29 PM

    I added a border to one of our forms.  The form is embedded on a responsive page.  when I shrink the browser window down and on mobile, the right side of the form is getting cut off.  Do you have any ideas on how to remedy this?

    Form code: 82276194035155

  • John_Benson
    Replied on August 16, 2018 at 9:22 PM

    Please try re-embedding the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    After that, test it again and let us know if the issue still persists. Thank you.

  • DudleyDigitalWorks
    Replied on August 20, 2018 at 3:19 PM

    Hi John,

    I tried embedding the code as the iframe.  The issue is unchanged.  It appears to be something with the border I added using the CSS inside the jotform customizer.  If I remove the border it works just fine.

    It is working on mobile (iphone) but in the computer browser when I shrink the page smaller than 730px it begins to cut off the right side.


    Thanks.

  • jonathan
    Replied on August 20, 2018 at 4:28 PM

    I test this on the form on your website, but so far I could not reproduce the issue you described.

    I test by manually shrinking the browser and the embedded form was responsive as intended.

    Example:

    1534796840zzz 2018 08 21 04 Screenshot 10


    Can you also take a screenshot of the issue and share it to us. Perhaps I was checking on the wrong issue.

    Let us know if issue persist.


  • DudleyDigitalWorks
    Replied on August 20, 2018 at 5:43 PM

    Your screenshot is the same as I am seeing.  The green border is being cut off the right side of the form

  • jonathan
    Replied on August 20, 2018 at 7:40 PM

    Thank you for the clarification. I now understand and see the issue when on you website.

    However the same issue is not happening when I test using the URL of the form only.

    Example:

    1534805612zzz 2018 08 21 06 Screenshot 10


    So the issue could be on the iframe embed used on the website.

    I checked again the iframe embed code, and I see the width was set to 1px only. I am not sure why it is like that, but can you manually change the iframe width to 585px; instead.

    1534808317zzz 2018 08 21 07 Screenshot 21


    set the iframe width to 585px; on your website.

    Let us know if this did not resolve the issue.

  • DudleyDigitalWorks
    Replied on August 21, 2018 at 11:02 AM

    Hi John,

    Thanks for working with me on this.  So I tried to manually change the width of the iframe to 585.  That in turn makes the form not responsive.  The actual form gets cut off including the border.

    1534863452Screen Shot 2018 08 21 at 10 Screenshot 10


    I also viewed the URL of the form and the border is being cut off.  Using chrome on a mac.  

    1534863541Screen Shot 2018 08 21 at 10 Screenshot 21

    It appears the the border is not being included in the total width of the form when it shrinks to be responsive.  It is cutting of 16px on the right. The border is 8px.

    Thanks!

  • DonaldHag
    Replied on August 21, 2018 at 12:38 PM

    I have noticed the same issue on my end. Am working on a solution and will let you know once it is available.