Chrome 10 displays embed code forms twice as long as they should be

  • Profile Image
    markashton
    Asked on March 14, 2011 at 03:41 PM

     

    Hi,

    There appears to be a problem with Chrome 10 displaying embed code forms to their optimum length

    Please try the following to display the problem in Chrome 10.

    Take a form of reasonable length

    Generate a preview of this form in Chrome 10 from the preview function that is accessible when you are browsing your forms (the preview that is accessible once you drilldown into the form is a different preview).

    If you scroll to the bottom of the form it goes way on down ....

    Then try it in other browsers - it's OK.

    Any Javascript to fix this iframe autosize problem?

     

    Regards Mark

     

     

  • Profile Image
    markashton
    Answered on March 15, 2011 at 11:53 AM

    Can you advise me why this has been skipped an answer? 

  • Profile Image
    liyam
    Answered on March 17, 2011 at 08:53 AM

    Hello,

    Sorry for not being able to reply to this immediately, I was not able to figure this out until I had an encounter of this kind of problem trying to test some forms on chrome.  It also took a length of time to figure out what was wrong.

    What I noticed is that this is not a javascript problem but how Chrome renders the CSS.  To be able to fix this, you will need to find the list tag (<li>) enclosing the submit button.

    example:

    <li class="form-line" id="id_2">
                    <div id="cid_2" class="form-input-wide" >
                        <div style="text-align:left" class="form-buttons-wrapper" >
                            <button id="input_2" type="submit" class="form-submit-button" >
                                Send Now!
                            </button>
                        </div>
                    </div>
                </li>

    The problem is that this extends too far a wide length and when this gets compressed it's like it pours over extending to height.  This should not be the case to browsers. 

    To fix: find out the width of your form:
    example: 540

    Inject a CSS width of the list tag ID in your form with the width size subtracted by at least 24 pixels (px) (not sure if this amount of subtraction is applicable to all).  Example ID is the bold-highlighted in my code above.

    example CSS code to inject:

    #id_2 {  width: 516px; }

    I have also submitted a ticket to our development team to look at this matter.

    Hope this helps.

  • Profile Image
    lstajda75
    Answered on March 18, 2011 at 09:36 AM

    Hello,

    I'm also having the same issue with Chrome. If I paste the script into my source code (ex: <script src="//www.jotform.com/jsform/11255*****"></script>), I get tons of white space after the Submit button. I then replaced this code with the iFrame code. This took care of the white space, but then my forms would display all jumbled and contorted at random intervals. I've now reverted back to the script code, but still tons of white space.

    Strange that I never experienced this problem before (and I've had the forms on my website for almost a year). I have 4 forms that this is affecting. Here is an example page of the white space: http://leverx.com/pages/resources/past-webinars.php

    Also, I would appreciate it if you could give me precise instructions for fixing this problem, since I'm not really a developer but a designer.

    Thanks,

    Liz 

  • Profile Image
    markashton
    Answered on March 18, 2011 at 01:00 PM

    Hi,

    I have applied the inject CSS code to the send survey tab.

    The ID = 14

    The form width is 600px

    The code I applied is as follows:  

    #id_14 {

    width: 550px;

    }

     

    There has been no change in the length of the form in Chrome 10. The behaviour remains

    Regards Mark

  • Profile Image
    liyam
    Answered on March 18, 2011 at 11:57 PM

    This is so far new to me and I have no idea if it's applicable to all. 

    What I actually did was resize each <li> tag one by one until I figured out which one of the list tags are causing the overflow in Chrome.

    here's my process:

    1. I saved the form in HTML in my local desktop
    2. I opened the source code and looked for the cause
    3. I added style="width: 300;" for the first <li> tag
    4. Saved the file and checked in in Chrome browser

    I did these steps over and over until I came up losing the extra height in the form.

    Can you give me the link to your form? I'll see what's causing it.

    -------

    Hello Liz,

    I checked your form and saw that it has the same case as my example.

    Add this to your CSS injection:

    style="width: 400px;"

    Hope this helps.


  • Profile Image
    lstajda75
    Answered on March 23, 2011 at 01:29 PM

     

    Liyam,

    Thanks for your reply. I tried inserting the code within my form's CSS, but didn't have any luck.

    Could the below line of code be causing an issue within Chrome?

    class="form-input-wide"

    Also, my web pages are all edited within Website Baker, my CMS program, if this makes any difference.

    Any other suggestions? As I said earlier, I've never encountered this problem before with Chrome except for recently. Why the sudden change?

    Thanks

    Liz

    P.S. I should verify that I'm inserting the code in the correct order. Is this correct?
    <li class="form-line" id="id_1" style="width: 400px;">

     

  • Profile Image
    liyam
    Answered on March 23, 2011 at 02:29 PM

    Oh wait, sorry, wrong code. My fault. :P

    Here's what you should inject in your CSS:

    #id_1 { width: 400px; }

    The code I have given you above in my previous post is an inline style tag.

  • Profile Image
    lstajda75
    Answered on March 23, 2011 at 03:12 PM

    Thanks for your reply. Would you please clarify where in the code I would insert this line? Is this correct?  <li class="form-line" id="id_1" #id_1 {width:400px;}> 

    --------------------------------------------------------------------------------------
    ORIGINAL CODE:

     <li class="form-line" id="id_1">

                    <div id="cid_1" class="form-input-wide">

                        <div style="margin-left:156px" class="form-buttons-wrapper">

                            <button id="input_1" type="submit" class="form-submit-button">

                                Submit Form

                            </button>

                        </div>

                    </div>

                </li>

    --------------------------------------------------------------------------------------

    Thanks,

    Liz

  • Profile Image
    liyam
    Answered on March 23, 2011 at 03:35 PM

    Sorry, when I said injecting the CSS, I meant doing this process:

    1. Going to My Forms
    2. Edit your form
    3. Click on Preferences

    4. A pop up will appear,click the Form Styles tab on top of the preferences pop-up.

    5. Enter or paste the text that I have provided to you in the text provided by clicking the text.  See the example above in the encircled area.

    I recommended the CSS injection for you as I noticed that you have embedded your form using script source.  But, if you wish to use the HTML source code and insert it into your page, then you are right with using <li class="form-line" id="id_1" style="width: 400px;">

    Inline CSS style tags is using the style="" property inside HTML tags.

    Hope this helps.

  • Profile Image
    lstajda75
    Answered on March 23, 2011 at 04:37 PM

    Liyam,

    Thanks again for your help. I used your shortcut method of editing the Form Settings within the Preferences menu. The line of code you gave me worked for a couple forms, but strangely, it did not change the appearance of others. Results are below.

    Did Not Work

    http://leverx.com/pages/on-demand.php

    http://leverx.com/pages/contact-us.php

     

    Did Work!

    http://leverx.com/pages/resources/past-webinars.php

    http://www.jotform.com/form/10172222905

     

    Any further suggestions would be appreciated.

    Thanks,
    Liz

  • Profile Image
    markashton
    Answered on March 23, 2011 at 05:49 PM

    Ahh!

    I've stumbled across the cause ;)

    It only seems to happen if you have an element that you have applied shrink to in the form.

    If you create a form without any elements shrunk - it's fine.

    Try shrinking an element and see what happens to the length of the form.

    Then expand it again.

    This is what I've observed on one form - I spotted it because I house the form in shadowbox and it suddenly had scroll bars on the side ....

    Call me a genius ;) However, I haven't had time to test another form

    Hope this helps

    Regards Mark

  • Profile Image
    liyam
    Answered on March 24, 2011 at 01:00 AM

    That's correct Mark,  when the form is shrinked, Chrome seems to not other parts inside the shrinked element adhere to the style of the tag and then it overflows somewhere by height thus the length of the form.

    Liz, not if you're doing something on your page right now but you can try this:

    For the two pages in which it did not work, add "min-height: 300px;" inside the iframe style. add also a width: 400px on your <li> tag where your submit button is just in case.

    Hope this helps.

  • Profile Image
    markashton
    Answered on March 24, 2011 at 02:31 PM

    Liyam

    Is this just a bug with the shrink element/ function?

    Reghards Mark

  • Profile Image
    liyam
    Answered on March 25, 2011 at 03:06 AM

    Hello Mark,

    Not sure how to categorize this but as a web developer myself, and looking at this as an isolated case for Chrome browsers only, I'm considering this as a browser-end issue.  This is similar on how everyone would complain about IE6 browsers when a webpage would look alright with Firefox, Safari, etc. and then it just explodes and scatters into different places when viewed in IE6.

    Hope this helps.