Changing the Window Size Hides Other Parts of the Form

With respect to the form on the subject page.

All looks pretty reasonable until you start viewing the page on various tablet forms, if you use the browser to reduce the viewing area at certain sizes part of the Form disappears and there is no way to view the bottom half of the form.

I know this method of testing responsive reaction is the best but up until now i have had good results viewing other JotForm forms this way. 

I have tried this page on a real iPad 3 and it seems OK

If i use the Preview in the Design view it appears OK at all the preset tablet and smart phone sizes. and i am using the Responsive option in Design view not the Responsive Widget, they both seem to deliver the same result.

Thx

John

Hi,

Are you referring to when you re-size the window of the page theI believe this is because you are using iFrame when you embed the form's code. Please note that when you are using iFrame you'll create a static height. I would suggest that you remove the <script> code that was included when you copied our iFrame code in the "Embed Forms" options.

Here's an example:

When you paste the code to your website you'll get a code wrapped in <iframe> and another a <script> code. Remove the <script> code, the one highlighted in pink below. Then set the iFrame scrolling attribute to "yes".

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/50198270300951" frameborder="0" style="width:100%; height:1826px; border:none;" scrolling="no"></iframe>

<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

If this does not work, could you try embedding the form using the default embed code or the full source code (if possible). 

Let us know which one will work for you. We'll wait for your response.

Thank you.

Hello,

Removing the script portion did not work. using the URL worked but i cannot use that method i have to embed code into a segment of my page.

Using the standard Embed code seemed to work OK, but now i am totally confused, i have been using Jotform for about 5 years and this is the first time i have been advised NOT to use iFrame, originally i was advised there were performance related issues that would occur if i did not use iFrame.

Also i have a number of other Forms embedded into the same site that use iFrame in conjunction with the Responsive option and they work fine.

SO why is this form different and why now am i being advised NOT to use iFrame.

I appreciate your help but i would like clear and concise advice on this, this site is live and people are using the JotForm to input data and on some of them PayPAl is integrated, I do not want any issues relating to performance.

This is very extremely to me I want to proper explanation please?

Thx

John

Hi John,

I was able to see the difference when viewing on Ipad browser.

Using your website:

using the form URL http://www.jotformpro.com/form/50081392157957

BUT aside form the difference, it seems the form on the website was responsive and does not prevent proper usage of the embedded form.

Can you please clarify that the issue is that the form is unusable when used on mobile browsers?

It will also help us check for further details if you can share a screenshot of the issue when viewing on your side.

We will wait for your updated response.

Thanks.

OK, 

Firstly, there are two long forms that i have that appear to behave in the same way, both are up on line on a live site but at this point in time these forms are not visible to the general public.

They are

http://glandoreyc.com/forms/isa.html

 and if you view this in your desktop browser you get the following "clipping" at the bottom of the form at certain screen widths.

The other form is at

http://glandoreyc.com/forms/classicentry.html

And when you view it in your browser and reduce the width of the browser you get the following "clipping" at the bottom of the form.

Ok, I understand that this method of checking responsive operation is not guaranteed, as it is not a true mobile platform, however i am concerned that the effect is only seen at the "middle" range of screen widths once you continue to reduce the browser window on the desktop the full form will once again come back into view..... why does this happen.

I am looking for some guarantees that the Responsive operation is working across  the range and i cannot do it, yes i have an iPAd and and iPhone and on the two devices it appears to work OK. BUt there must be a way of checking the operation in a more robust way.

THe other issue i have is that your colleague recommended i switch to a non iFrame embed and in the past JotForm have recommended not to do this ... so what is the story here? these two pages are using iFrame is this the way to go ? and why would i want to change.

Once again thanks for your continued assistance.

John

Hi John,

I believe this is because of how the form detects the width and height of the device where it is being displayed at. The responsiveness detects if the device being displayed at is a mobile display rather than detecting the size of the browser it is being viewed at.

For the issue of resizing the window of the browser, we can use a custom CSS code to set specific height so that it can still cover the whole content of the form. If that does not work, the problem might be the totality of the website's width and height, it may have a minimum height that does not cover the entirety of the form's content or the specific div where the iframe is being placed at has an inherited minimum height.

I'll add this custom CSS code in the form's CSS tab in the Designer which will act as the auto-resize function depending on the screen where it is being displayed at:

@media screen and (max-width: 500px) and (min-width:100px){

    .form-all {

        min-height : 1800px !important;

    }

}

@media screen and (max-width: 2500px) and (min-width:510px){

    .form-all {

        min-height : 2500px !important;

    }

}

The reason why we suggest different embed codes is that the structure of ones website or the website builder where it is being made has a large impact on what codes to be use, other's does not accept those with

The form you show in your screen shot is nothing to do with me.

Please do not add any more CSS to the form, your colleagues have worked with me in the past and the CSS that is there in only one of the forms works well, please do not alter it.

The Classic Regatta entry form has no CSS and if possible i would like it to stay that way at present.

THX

John

Hi John,

Apologies for the confusion, I might have pasted a different form that I have. No worries, we do not make changes directly to user's form, we clone them for testing purposes and make changes in our end.

Regarding the CSS above, it just sets a minimum height for your form depending on what the size of the window where it is being displayed at.

Example would be the code below, it just states that when the window size has a maximum width of 500px but is not less than 100px then set the minimum height of the form to 1800px, it maybe exaggerated on the size but you can change that so that it won't be too long:

@media screen and (max-width: 500px) and (min-width:100px){

    .form-all {

        min-height : 1800px !important;

    }

}

You can also try cloning my form and make this as a testing form for any changes that you are making so that you can leave the original form still intact: http://form.jotformpro.com/form/50198270300951 

We'll try to investigate further on what might be conflicting the your website that cuts the bottom part of the form. But I'm guessing it's the inherited width and height of the main website.

Thank you for your understanding and patience.

I am intrigued by your comment on the inherited height of the web page. For your info this site is 100% responsive and as I indicated previously this issue only impacts the middle range of widths when you close the browser window even further the issue is no longer visible and all of the form is displayed and at that point the page is even longer

thx

john

Hi John,

Not sure if I understand the last part of your reply. Did you mean the problem is now fixed?

I think we found the culprit, I might have missed that part that your whole website is already responsive it's already making a conflict with the responsiveness of the form itself. May I know if how this website is build? Did you use a website builder, a framework, Wordpress might be?

I'm guessing the following cases or analysis could help solve the problem.

1. The website is already responsive so no need to make the form responsive, it should inherit the styling that the main website have when it comes to layout, but that's just a guess. We can use the default embed code or the full source code.

2. The website is already responsive, we can use iFrame, enable the form's responsiveness and remove the script code that adjust the height of the iFrame itself, but the problem is that iFrame is set to have a specific height and the form is being cut at the bottom when resizing the window (but not in the mobile devices, is that right?). I'm thinking if this code could work:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/50198270300951" frameborder="0" style="width:100%; min-height:1826px !important; border:none;" scrolling="yes"></iframe>

We've set a minimum height for the iFrame then set the scrolling to "yes".

Not yet sure though, but I hope it could at least make changes. But please do apply this to your test pages and not on your live and official webpage.

I hope this helps.

Thanks

Hello,

Firstly, all my web sites are built using Freeway and up till this point all the JotForm inputs have worked 100%

You need to be aware that i have 3 other Jotform inputs that work 100% on this site.

In the other Jotform inputs i use the Responsive Widget and all if fine..... and i was advised that the Responsive Widget was still required by JotForm and it worked great.....

You still have not answered the question 

Why is the issue only apparent when the Desktop browser window is reduced to a point between the Desktop and a smartphone it is only at this point the the issue occurs.

Based on some past experience i am not going to implement any additional CSS code until the logic of why i should use it is fully explained...

Thank You for your continued support

John

Hi John,

As of this writing, I can't seem to reproduce the problem. Were you able to resolve the problem?

This is probably an issue with iframe static height which is nature on the iframe code. Your site and form is mobile responsive, thus rendering the mobile layout when you re-size the browser window. The form automatically extend its height since the form content changes according to the browser window size. However iframe height does not dynamically respond to the form height resulting to a cut off. In short, the iframe height is shorter than its content height (the form height). Usually to resolve this, you simply need to adjust the iframe height so it covers the entire form.

There are a lot difference when viewing on desktop mode (small window) and on mobile. One could be the view port meta code which is present on your page. This controls the mobile sites more consistently on screens of different sizes and resolutions.

<meta name="viewport" content="width = device-width, initial-scale = 0.85, minimum-scale = 0.60, maximum-scale = 1.00">

Second is the @media query CSS. 

Hope this information helps. Let us know if you have further questions or if you need further assistance.

Thank you!