Embedded form gets cut off when show/hide conditional option is applied.

Raineydaysbranding

Asked on July 30, 2015 at 3:07 PM

I have used this form for some time for our employment application. It has worked fine until recently and now I am having issues out of it. We haven't changed anything to my knowledge other than a verbiage change here or there.

When you scroll down the form you will see a questions. "Is this your first job? yes or no" if you click "no" the form is suppose to expand asking for previous employer information. For some reason when this happens it cuts off the entire bottom of the form. You cannot see a submit button or any additional questions that still remain.

Aslo we are having an issue with the mobile version of this form. It shows up fine on a computer but is again cut in half vertically it seems when on a mobile device. Ideas on both would be helpful!! Thank you very much!
David JotForm Support Manager

Replied on July 30, 2015 at 4:43 PM

Please try the following:

1) Remove the current embedded code

2) Ge a fresh iframe code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

3) Paste the obtained code in a text editor like the WordPad, you will notice two part of code, delete the script part, just leave the iframe part:

4) Set the scrolling property to 'yes':

5) Now copy and embed the iframe code.

On regards of the mobile viewing, that will be addressed on this thread: http://www.jotform.com/answers/624499

Let us know if you need more help, we will be glad to assist you.
Raineydaysbranding

Replied on July 30, 2015 at 6:12 PM

I did what you asked but the form is still being cut off. I am working on the mobile issue as we speak. Below is the undated code for my page if that helps with the updated iframe code.

<!DOCTYPE html>
<html class="html">
<head>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="7.2.232.244"/>
<title>Apply</title>

<link rel="stylesheet" type="text/css" href="css/site_global.css?11668320"/>
<link rel="stylesheet" type="text/css" href="css/apply.css?24025650" id="pagesheet"/>

<script type="text/javascript">
   document.documentElement.className += ' js';
</script>
   </head>
<body>

<div class="clearfix" id="page">
   <div class="grpelem" id="u2797">
    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/33105420082944" frameborder="0" style="width:100%; height:6940px; border:none;" scrolling=“yes"></iframe>

</div>
   <div class="clip_frame grpelem" id="u2833">
    <img class="block" id="u2833_img" src="images/bubbleedit1600px.jpg" alt="Embedded form gets cut off when show/hide conditional option is applied. Image-0" width="1700" height="186"/>
   </div>
   <a class="nonblock nontext grpelem" id="u2835" href="index.html"><img id="u2835_img" src="images/thewavelogoalt-u2835.png" alt="Embedded form gets cut off when show/hide conditional option is applied. Image-0" width="405" height="237"/></a>
   <div class="clip_frame clearfix grpelem" id="u2837">
    <div id="u2837_clip">
     <img class="position_content" id="u2837_img" src="images/3mincw_newlogo.png" alt="Embedded form gets cut off when show/hide conditional option is applied. Image-0" width="363" height="363"/>
    </div>
   </div>
   <div class="clip_frame grpelem" id="u2839">
    <img class="block" id="u2839_img" src="images/fayetteville.png" alt="Embedded form gets cut off when show/hide conditional option is applied. Image-0" width="327" height="67"/>
   </div>
   <div class="grpelem" id="u2848"></div>
   <div class="verticalspacer"></div>
</div>

<script type="text/javascript">
   if (document.location.protocol != 'https:') document.write('\x3Cscript src="//musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
   window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?3880880085" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>

<script type="text/javascript">
   $(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
   </body>
</html>
Raineydaysbranding

Replied on July 30, 2015 at 6:22 PM

Ok so I went back in after making the changes to the mobile side and copied the iframe code again and reloaded it into my page and now the form is working correctly on a computer. The mobile issues still remain though....thoughts?
David JotForm Support Manager

Replied on July 30, 2015 at 8:18 PM

I have replied to you on the other thread regarding mobile view issues. We ask to keep thinks separately to avoid confusions in threads, because another colleague may assist you next time.

Now, regarding the cutting off issue, I just inspected your page source code, and it's indicating me that the changes recommended on my previous replied were not made:

As I speak, I have tested your form and the issue continues:

Please make sure to do the changes, and do get back to us if any issue continues.
Raineydaysbranding

Replied on July 31, 2015 at 3:31 PM

I double checked the code again and it appears to be working now in safari but not firefox. Firefox will not let me scroll down only left to right. Safari works correctly though.....
Ben

Replied on July 31, 2015 at 5:34 PM

I have just tested your form on your website over FireFox and it is scrolling properly for me, but since your website has its own scrollbars - both up and down and left to right, while form has only up and down (vertical scrollbars) it means that your mouse was 'locked' into the website scrollbars.

Thing with them is that browsers do their best to understand where the scrolling should happen. So if you start scrolling at the top of your website, you will go all the way down, skipping all those inner scrollbards, since the scrolling originated at the top.

In the same time, if you start scrolling within some zone, it will allow you to go to its bottom, where if you continue scrolling, it will start scrolling on its parent. In this case, if you started scrolling in the form, and got to its end, but still using the scroll wheel of your mouse, it will jump out of the form scrolling and start scrolling your website instead.

Also, on the desktop, the form - when you open all conditionally hidden fields, it will no longer need to scroll since everything seems to be shown properly - when viewed on FireFox.
sagar

Replied on September 8, 2015 at 8:06 AM

Dear Friends,

Table horizontal scroll bar not Working in IOS Device
Mike_G JotForm Support

Replied on September 8, 2015 at 9:56 AM

@sagar

I have moved your question to a new thread because we believe that we would be able to assist our users better if they have a thread of their own for every question they have. You can click this link to go to that thread. Thank you.