CSS IFrame Required Field Height

  • Profile Image
    gruposte
    Asked on July 04, 2013 at 06:48 PM

    the message:

    "Incomplete values!"

    my code:

    "< script type="text/javascript" src="//form.jotform.co/jsform/30445783746866"></ script>"

    the message appears when i leave in blank a required input.

  • Profile Image
    pinoytech
    Answered on July 04, 2013 at 07:08 PM

    Hi,

    Your form seems to be working fine on my end upon checking. Please take a look at this: http://www.screencast.com/t/wbgEXTKk

    Can you please try it again if the issue still persist? But, please make sure to fill on all required fields.

    Thank you!

  • Profile Image
    gruposte
    Answered on July 04, 2013 at 08:16 PM

    Yes, you are correct. The form works perfectly if you fill in all the required fields, however, the error appears when you do not fill in a required field. I am attaching an image of the message that should be appearing instead of the error that I mentioned previously.

  • Profile Image
    abajan
    Answered on July 04, 2013 at 09:20 PM

    @gruposte

    I see what you mean. These types of issues are usually caused by conflicts between pre-existing scripts on the page and those of the form. Replacing the form code with its iFrame equivalent should fix the problem. Please let us know if it does.

    Thanks

  • Profile Image
    gruposte
    Answered on July 05, 2013 at 12:39 PM

    @abajan

    The problem has been solved as you mentioned. But now we have an issue the frame does not grow verticaly when the css for the required inputs are shown on the screen.

    here is the link so you can check it out: http://gruposte.com/ci/contacto

    thank you for all your help =)

     

  • Profile Image
    jefreylandicho
    Answered on July 05, 2013 at 01:26 PM

    Please try setting your form or Iframe embed code height to 709px.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

  • Profile Image
    gruposte
    Answered on July 05, 2013 at 01:56 PM

    @jefreylandicho 

    Thank you but the problem persists, the javascript changes the height value automatically in execution time of 519px all the time.

    If i put a div e.i.

    < div id="form">
    <i frame>code jotform</ i frame>
    <script >code jotform</script > 

    </ div>

    and in css:

    #form {height: 709px;}

    the iframe looks like the image:

  • Profile Image
    jefreylandicho
    Answered on July 05, 2013 at 02:10 PM

    You do not need to enclose the iframe embed code inside a DIV tag. Try removing the script and use the embed code below.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

    or

    <iframe src="//form.jotform.co/form/30445783746866" frameborder="0" style="width: 100%; height: 709px; border: none;" scrolling="no"></iframe>

  • Profile Image
    gruposte
    Answered on July 05, 2013 at 09:46 PM

    @jefreylandicho

    Thank you so much, I am aware that I am not supposed to add the div, I simply added it to show you up to what point the iframe would appear. Since the beginning I had the height set to 709px in my code, but the script would modify it automatically.

    Nevertheless, you gave me the solution in your response, the solution was to eliminate the script that jotform gave me; I removed it and now everything is perfectly visible with the 709px height.

    The problem is that this is a temporary solution, because I do not want the height to be a fixed height. I want it to measure 519px when it opens, but for it to extend to 709px when the required fields are not filled in. This is so that there will not be a white space between the form and the footer.  

    I have already tried with min-height and max-height, but this does not work. I do not know what other way I can do this.

    It would be for the iframe to grow dynamically, I believe this is what the script was for but it does not work :(

  • Profile Image
    abajan
    Answered on July 06, 2013 at 06:30 AM

    @gruposte

    Although dynamically changing the height of an iFrame according to its contents is possible, it would only work if the parent and child frame are on the same domain. Perhaps the best solution for the time being would be to just change scrolling="no" to scrolling="yes". That way, when the error messages expand the height, users would be able to scroll down to see the bottom of the form. (The iFrame code on your page is not what would have been provided by the Embed Form Wizard. First, get the code from the wizard and then change the scrolling value.)

    Thanks