Width does not fit into the page

  • Profile Image
    innovacia
    Asked on November 25, 2012 at 04:41 PM

    Problems with the feedback form.

    1. Problems with the feedback form.

    Width does not fit into the page

    although I did reduce it.

    Here is the link -

    http://innovacia.info/wppage/vip-%D0%B2%D1%81%D1%82%D1%80%D0%B5%D1%87%D0%B0-%D1%81-%D0%B2%D0%BB%D0%B0%D0%B4%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%BC-%D0%BB%D1%8E%D0%B1%D0%B0%D1%80%D0%BE%D0%B2%D1%8B%D0%BC

    2. Can I change the html-code?

  • Profile Image
    Deygus
    Answered on November 25, 2012 at 05:10 PM

    Try placing your form within an iFrame on your website to see if this helps at all.

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 06:37 AM

    1. I put  a form in IFRAME.

    2. The form does not fit in the width of page again.

    3. Form is no longer hiding behind "Drop Dawn"

    LINK - http://innovacia.info/wppage/vip-%D0%B2%D1%81%D1%82%D1%80%D0%B5%D1%87%D0%B0-%D1%81-%D0%B2%D0%BB%D0%B0%D0%B4%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%BC-%D0%BB%D1%8E%D0%B1%D0%B0%D1%80%D0%BE%D0%B2%D1%8B%D0%BC 

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 06:58 AM

    Hi,

    Replace your iframe code to this:

    <iframe allowtransparency="true" src="//form.jotformeu.com/form/23295211410340" frameborder="0" style="width: 94.8%; height:457px; border:none;" scrolling="no"></iframe>

    I just changed the width value from 100% to 94.8%, that might help.

    Do let us know if the problem still persist. Thanks!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 07:46 AM

    Form has become too narrow now.

    What to do?

    link

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 07:47 AM

    The form has a width of 600px

    but it turns out less.

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 07:50 AM

    Hi,

    You are using comma on the percentage value which isn't right, please chagne it to period. So this , becomes this .

    <iframe allowtransparency="true" src="//form.jotformeu.com/form/23295211410340" frameborder="0" style="width: 94.8%; height:457px; border:none;" scrolling="no"></iframe>

    Please copy the code I've provided here and replace your existing code. Thanks!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 08:20 AM

    Changed the comma to a point.

    It worked! Thank you.

     

    It remains this:

    form is not hidden under the "Drop Dawn"

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 08:23 AM

    Ie fields hidden ,

    and the form, the background - no.

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 08:29 AM

    I am sorry but your second concern is a bit vague to me. Can you please elaborate it a bit?

    Feel free to explain the problem using your native language and we'll try to understand it be best we can. Thanks!

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 08:50 AM

    Ok, are you referring to this styling issue? https://cms.jotform.com/uploads/image_upload/image_upload/global/1977_drop.png

    Please let us know. Thanks!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 09:02 AM

    Function - form collapse.

    01 form is minimized. Expectation:
     

     

    reality

    Lots of empty space

    takes place on the page
     

     

    А что, там есть кто-нибудь, кто понимает по русски? ;)

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 09:10 AM

    I see. Thanks for the screenshot, we greatly appreciate that!

    The reason why it displays a blank space is because you are using iframe embed code. This is how iframe works, FYI. If you'd like to remove the spacing below it then you have to switch back your embed code from iframe to script embed code. You may use this:

    <script type="text/javascript" src="//www.jotformeu.com/jsform/23295211410340"></script>

    If the width overlaps again after using that script embed code, please inform us here so we can check it further. Thanks!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 09:12 AM

    "Ok, are you referring to this styling issue? https://cms.jotform.com/uploads/image_upload/image_upload/global/1977_drop.png

    Please let us know. Thanks!"

    It, too.

    But this can be tolerated.

    Or is it too can be removed? 
  • Profile Image
    idarktech
    Answered on November 26, 2012 at 09:14 AM

    That shouldn't be a problem using script embed code. Please try to switch your embed code first so we can check how it looks here. Thanks!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 09:18 AM

    Yes, width, unfortunately overrides.

    LINK

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 09:26 AM

    I inserted the code:

    Here's what happens:

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 09:30 AM

    I saw that the bracket is missing.

    Added.

    The same result.

  • Profile Image
    Welvin
    Answered on November 26, 2012 at 10:58 AM

    Hi,

    We are sorry for a bit delay. I can see that you have reverted back your website to the default wordpress themes and have lost the data? We cannot proceed on giving you the fixed solutions to the issue without the form running on your website.

    Can you revert it back? Space is just a minor issue and I am sure that we can have a solution for that.

     

    Thanks

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 11:06 AM

    The form is in the iframe HERE

     

    Form is not in the iframe HERE

  • Profile Image
    Welvin
    Answered on November 26, 2012 at 11:25 AM

    Using the Javascript embed method: 

    <script type="text/javascript"src="http://www.jotformeu.com/jsform/23295211410340"></script>

    Please try injecting below codes to your form;

     

    #cid_9 {

    padding-top:15px !important;

    }

    .form-all {

    width: 95% !important

    }

    Let me know if won't work. Thanks

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 02:55 PM

    I do not know, Javascript, unfortunately.

    Exactly where to insert this code?

    Can we fix it in service jotform?

  • Profile Image
    EduardoMendez
    Answered on November 26, 2012 at 04:03 PM

    Hi there,

    You would need to follow this guide in order to inject the above CSS code.

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please give this a try and let us know if we can further assist you!

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 05:03 PM

    I did (to inject the above CSS code).

    The form is in the iframe HERE

    (The shape is wider than the page)

     

    Form is not in the iframe HERE

    ( blank space)

  • Profile Image
    EduardoMendez
    Answered on November 26, 2012 at 05:42 PM

    Hi there,

    It seems that the form has a padding area of 20px.

    Please try replacing your CSS with the following and test embedding it with the script method.

    #cid_9 {padding-top:15px !important;}.form-all {padding:20 0 20 0; width: 95% !important}

  • Profile Image
    EduardoMendez
    Answered on November 26, 2012 at 05:46 PM

    BTW.  Here is a guide to embed with the Java Script method as mentioned by colleague in previous posts:

    http://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page

  • Profile Image
    innovacia
    Answered on November 26, 2012 at 06:09 PM

    I'm sorry but

    nothing has changed

  • Profile Image
    liyam
    Answered on November 26, 2012 at 08:17 PM

    Can you edit your wordpress page and enclose the script tag with <p style="margin-right: 35px;"> ... </p>?

    Example:
    <p style="margin-right: 35px"><script type="text/javascript"src="//www.jotformeu.com/jsform/23295211410340"></script></p>

  • Profile Image
    idarktech
    Answered on November 26, 2012 at 08:24 PM

    @innovacia

    In addition to my colleague Liyam, please try this fix.

    1. Edit your page_selling_style.css on your WP dashboard.

    2. Find this class .ps_content iframe and change padding value from 20px to 0. That should fixed it!

    Example,

    FROM:

    .ps_content iframe {

    display: block;

    padding: 20px;

    border: 1px dashed #CCC;

    margin: 10px auto;

    background: white;

    }

     

    TO:

     

    .ps_content iframe {

    display: block;

    padding: 0;

    border: 1px dashed #CCC;

    margin: 10px auto;

    background: white;

    }

    Thanks!

     

  • Profile Image
    innovacia
    Answered on November 27, 2012 at 08:44 AM

    I took the advice of 

    liyam.

    It worked.

    Thank you.

     

    There is one more thing - the font color.

    It is already in another topic might be to ask?

    I'm doing the following:

     


    The result on my website:

     

  • Profile Image
    pinoytech
    Answered on November 27, 2012 at 08:54 AM

    Hi innovacia,

    I've fixed font color problem of your form for you and it should be working fine by now.

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    innovacia
    Answered on November 27, 2012 at 09:02 AM

    Oh, thank you!

    I only want orange!

    Dark color is almost unreadable ... (

  • Profile Image
    innovacia
    Answered on November 27, 2012 at 09:03 AM

    And where is it possible to change yourself?

  • Profile Image
    pinoytech
    Answered on November 27, 2012 at 09:18 AM

    Inject this code into your form.

    .form-header {

    color: orange !important;

    }

    If you need further assistance, do let us know.

    Thank you!