Form height issue of iFrame embedded form

OK,

 

Firstly, thank you for all the support that the forum has given and in particular the contribution of Ben, but i think i have come to a point that i need to reset the scene so we are all on the same page so to speak.

There is one Primary form at

http://form.jotformpro.com/form/51022125385950?

There are two embedded iFrames within this form and these "Child" forms are at the following locations.

http://form.jotformpro.com/form/51032395272955?

and

http://form.jotformpro.com/form/51032581912953?

if you want to see the form(s) in operation on a test site use the following 

http://www.reenoserve.com/GHYC/forms/index.html

You will notice there is space between the end of the Submit button and the embedded form(S) i do not understand this.

However the major concern is that there is a far greater space between the end of the embedded form and the Footer, you can view this effect on a desk top but it is much worse on a smart phone or tablet. And at this time this is my outstanding issue in relation to displaying embedded forms in a responsive mode.

The CSS in the Primary form is

 

.form-all {

margin-top : -75px !important;

}@media only screen and (max-device-width : 480px){

#id_19 .form-description {

right : -10px !important;

top : 30px !important;

}}@media only screen and (max-device-width : 1024px){

#id_19 .form-description {

right : -20px !important;

top : 10px !important;

}}input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

font-size : 16px;

}@media screen and (-webkit-min-device-pixel-ratio:0){

select:focus, textarea:focus, input:focus {

font-size : 16px;

}}@media screen and (max-width:768px){

form.jotform-form {

padding : 40px;

}}@media screen and (max-width:640px){

form.jotform-form {

padding-bottom : 10px;

}}#stage.form-all, #stage > ul.form-all {

margin-top : 25px !important;

}

#id_20 {

    margin-bottom: -40px;

}

The CSS in the Embedded (Child) Forms is 

 

form.jotform-form {

    padding : 0;

}

ul > li.form-line {

    padding-left : 0;

    padding-right : 0;

}

.form-all {

    margin-top : -75px !important;

}

@media only screen and (max-device-width : 480px){

    #id_19 .form-description {

        right : -10px !important;

        top : 30px !important;

    }

}

@media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

        right : -20px !important;

        top : 10px !important;

    }

}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

    font-size : 16px;

}

@media screen and (-webkit-min-device-pixel-ratio:0){

    select:focus, textarea:focus, input:focus {

        font-size : 16px;

    }

}

@media screen and (max-width:768px){

    form.jotform-form {

        padding : 40px;

    }

}

@media screen and (max-width:640px){

    form.jotform-form {

        padding-bottom : 10px;

    }

}

#stage.form-all, #stage > ul.form-all {

    margin-top : 25px !important;

}

form.jotform-form {

    padding-left : 0 !important;

    padding-right : 0 !important;

}

div.form-all {

    min-width : 100%;

    width : 100%;

}

html.supernova {

    margin-right : 3%;

    padding-left : 1%;

    padding-right : 0;

}

div.form-all {

div.form-all {

    box-shadow : none !important;

}

 

#id_20 {

    margin-bottom : -50px;

}

 

Thank You

 

John

The main iFrame form is not able to automatically adjust its height. You can might consider trying the next options to fix the iFrame height issue:

1) Try a standard Embed code to see if it work right on your website. It should automatically adjust the main form height based on the form content.

2) Alternatively, update your iFrame code a bit.

Change from:

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

to

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51022125385950" frameborder="0" style="width:100%; height:1650px !important; border:none;" scrolling="auto"></iframe>

Please give it a try and let us know if you need any further assistance.

Hello,

Well i tried your suggestion of using the standard embed code and it seems to be working fine.

One very important question, i am not a professional web developer, my understanding of HTML is minimum, my understanding of CSS is even less. When i first started to use JotForms embedded into the website i was advised by people on this Forum to use the iFrame method as it was far more reliable.

So why should i now downgrade the method to the standard embed ? what are the risks, drawbacks and limitations please?

 

John

The Embed code method is similar to the iFrame, it generates the form iFrame on the fly and dynamically changing the iFrame height. Although, in some cases the Embed script might conflict with other javascript libraries and code (e.g. resolving jQuery namespace conflicts). In this case we suggest switching to the iFrame version.

I have checked your web page http://www.reenoserve.com/GHYC/forms/index.html in different browsers, and unfortunately, the Embed code seems to be unstable in Google Chrome. I would like to recommend you to switch back to the iFrame code, and modify height and scrolling properties in order to resolve the height issues.

Hello,

Just realised that i posted a reply to this much earlier and it appears to have gone missing???

Anyway, here is the current status, i am now using the embedded iFrame with the code changes to height and Scrolling Auto.

 

And the form appears to be working fine at this point.

To be hones Raul made a recommendation earlier to use scrolling set to Auto and i rejected it as i totally misunderstood the Scrolling function, apologies for that.

 

All i have to remember now is these two small code changes if i change the Primary Form in any way .

which will cause me to update the embedded code.

Thanks

I'm glad it somehow works in your end. And we appreciate your patience and understanding on this matter.

If you needed any assistance again, please do not hesitate to open a new thread here in the forum.

Thank you.