Embedded iframe form does not display fully

  • NVParoleBd
    Asked on May 4, 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" onDISABLEDload="window.parent.scrollTo(0,0)"></iframe>

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

    //--></script>

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

     

     

     

    Jotform Thread 563780 Screenshot
  • NVParoleBd
    Replied on May 4, 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.

  • Boris
    Replied on May 4, 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" onDISABLEDload="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.

  • NVParoleBd
    Replied on May 4, 2015 at 1: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

     

  • Charlie
    Replied on May 4, 2015 at 1: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" onDISABLEDload="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.

  • NVParoleBd
    Replied on May 4, 2015 at 2:00 PM

    Yes.  That worked!  :)