Form cut off part way down when zoomed out.

  • Profile Image
    HPSteve
    Asked on November 28, 2011 at 01:15 PM

    I posted a problem a couple months ago stating that the bottom portion of my test had been cut off for an unknown reason. Then when you guys tried to check it out it apparently wasn't happening to you guys. 

    So I was told to come back when the problem did. turns out the way YOU were viewing your browser was actually the problem. When you have a widescreen monitor (like most desk jobs these days) you are using a zoomed out view of websites. So if you go to www.hydropeptide.com/webinar and zoom out your view of your browser (ctrl & -) (ctrl & scroll down)

     

    You will see the submit button and the other questions at the bottom get cut off. Just wondering if anyone has some insight on this?

  • Profile Image
    NeilVicente
    Answered on November 28, 2011 at 02:00 PM

    Steve,

    I see that the issue occurs only on Chrome when the page is zoomed out. Using the iFrame method to embed the form is the perfect solution to your problem.

    Anyway, you do not have to worry about having scrollbars as iFrame embed codes are set to not display scrollbars by default.

    To get your form's iframe codes:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click iFrame
    4.  Copy the codes provided in the succeeding screen

    Hope this helps.

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 02:35 PM

    That is false what you said about iFrames, THEY ARE SET TO DISPLAY THE SCROLLBAR BY DEFAULT

    not the other way around. I have already done all those "little fixes" to get by for the past few months but people are having issues submitting this form and we use it daily. 

    PLUS the iframe by default is like 100px by 25px. Even when I customize the code to not be width:100% by height:100% and it still stayed the same size.

    iFrame sucks for anything, pop up or source code is the way to go, but the "required fiels" are no longer required for source code.

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 02:39 PM

    Seeing as Internet Explorer SUCKS for anything secure or mixed content (secure and insecure), I have suggested on a support page on our website to USE Google Chrome to view our site optimally. 

    I would like to just know the reason why it doesn't display correctly. I already know the workarounds. Thats why I said in my first message this has ALREADY BEEN AN issue, and now I've been waiting for it to be viewable again so someone can troubleshoot it and identify the problem.

  • Profile Image
    NeilVicente
    Answered on November 28, 2011 at 03:01 PM

    I was actually referring to the iFrame embed codes generated by JotForm, not iframes in general. Below is the generated iframe code for your form:

    <iframe allowtransparency="true" src="//form.jotform.com/form/12200007234" frameborder="0" style="width:100%; height:1098px; border:none;" scrolling="no">
    </iframe>

    You can see that scrolling is set to "no" and height is 1098px. Kindly use this code for your site.

    I have provided a screenshot below to show the difference between using iFrame embed and Script embed codes when the page is zoomed out. Notice that in iFrame mode, the form is not cut off and scrollbars are not displayed.

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 03:50 PM

    I know you were saying the iFrame embeded code. Like I said before I tried it myself. I edited the code doing NO scrolling and YES scrolling. It all shows up the same way every time. The little 100 by 25 pixel scroll box. I'll post a picture so you can see

     

    This is after I copied your exact code and pasted it in my site.

  • Profile Image
    NeilVicente
    Answered on November 28, 2011 at 03:59 PM

    This is what I found out. After you pasted the iframe codes on your page, your site's tinymce editor stripped off all styling for the iFrame.

    The codes were reduced into this:

    <iframe src="//form.jotform.com/form/12200007234" frameborder="0"> </iframe>

    After doing a quick Google search for your site's platform (BigCommerce), I stumbled upon this thread which suggests that you switch the editor to Source by clicking the HTML button before pasting the iframe codes.

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 04:04 PM

    Awesome. Exactly the answer I was looking for. I knew it had to be something with our hosting service. I was not the one to set it up, but have been given the responsibility for the website. 

     

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 04:06 PM

    Even though I already am clicking HTML to edit the source code.

    That narrows down the issue to my tinymce editor.

  • Profile Image
    NeilVicente
    Answered on November 28, 2011 at 04:30 PM

    In that case, contacting BigCommerce's support would be the best thing to do.

    Anyway, if you don't mind me asking, does the issue with script embed only occur when zooming out the page? If yes, does your page require to be zoomed out to become usable?

    I cannot seem to find any situation to recreate the original issue in this thread other than zooming out the webpage.

  • Profile Image
    HPSteve
    Answered on November 28, 2011 at 05:00 PM

    Yes that is the exact issue. And as you clarified earlier its ONLY in Chrome. Well I didn’t check Firefox, but I’ll just assume.

     

    So zooming in is the only way to “fix” the problem. And zooming out or having a naturally LARGE appearance setting (above 1000 by 1000 px) with a widescreen monitor it happens naturally and you have to zoom in to fix it.

     

    But you are correct. Zooming out is the only thing that creates the problem. And only in Google Chrome.