Embedded iframe form does not display fully

  • Profile Image
    NVParoleBd
    Asked on May 04, 2015 at 12:39 PM

    I have an extensive form that includes conditional logic.  You can view it here: https://secure.jotformpro.com/form/51197144508961

    The State of Nevada uses an Ektron CMS.

    When I embedded the form using the code suggested in for iFrame, it was too short, so I changed the length parameter to 100%.  This allowed much more of the form to display, but it still ends prematurely.  See this page: http://pardons.nv.gov/Online_Forms/Embedded_OnLine_Pardons_Application/

     

    This is the code that I'm using to embed the form:

    <iframe id="JotFormIFrame" src="https://secure.jotformpro.com/form/51197144508961" frameborder="0" scrolling="no" style="border: currentColor; width: 100%; height: 100%;" allowtransparency="true" onload="window.parent.scrollTo(0,0)"></iframe>

    <script type="text/javascript"><!--

    //--></script>

    I'd prefer to have this as an embedded form.  Suggestions?

     

     

     

  • Profile Image
    NVParoleBd
    Answered on May 04, 2015 at 12:51 PM

    By the way, the form is now only displaying a very small amount of information.  It stops during the header.

  • Profile Image
    Boris
    Answered on May 04, 2015 at 12:58 PM

    Hello NVParoleBd.

    As your form is almost 6000 pixels high, I would recommend you change the height property to 6000px.

    <iframe id="JotFormIFrame" src="https://secure.jotformpro.com/form/51197144508961" frameborder="0" scrolling="no" style="border: currentColor; width: 100%; height: 6000px;" allowtransparency="true" onload="window.parent.scrollTo(0,0)"></iframe>

     

    It may not be obvious, but the web technology is designed in such a way that a 100% height for the iframe means that the iframe has the same height as the element in which the iframe is.

    It does not make the iframe to display a 100% of the iframe's content. Because of this, please avoid setting your iframes height in percentage values - percentages here have a different meaning than most people would assume.

    Please let us know if setting it to 6000px resolves the issue for you, or if you have any problems in setting up your form. We will be happy to assist you in making your form just the way you want it to be.

    Kind regards,
    Boris.

  • Profile Image
    NVParoleBd
    Answered on May 04, 2015 at 01:05 PM

    Hi Boris,

    Your solution works, and it does not work.

    The problem is that there is conditional logic built into the form.  If additional space is required because of the conditional logic execution, the form is too short again.  

    I guess I could change the length to 10,000, but then it would look stupid with a large brown block at the end.

    Thanks,

    Alan

     

  • Profile Image
    Charlie
    Answered on May 04, 2015 at 01:54 PM

    You could also try setting up scrolling="auto". 

    Here's an example:

    <iframe id="JotFormIFrame" src="https://secure.jotformpro.com/form/51197144508961" frameborder="0"scrolling="auto" style="border: currentColor; width: 100%; height: 6000px;"allowtransparency="true" onload="window.parent.scrollTo(0,0)"></iframe>

    That should give you an initial height that would cover your whole form, then when it becomes longer because of conditional logic the scroll show appear.

    Do let us know if that works.

    Thank you.

  • Profile Image
    NVParoleBd
    Answered on May 04, 2015 at 02:00 PM

    Yes.  That worked!  :)

     

  • Profile Image
    Shadae
    Answered on May 04, 2015 at 02:30 PM

    Hi,

    On behalf of my colleague you are most welcome. We are happy to hear that you got your form to display fully.

    Please feel free to contact us if you need further assistance.

    Thank you.