Dropdown Is Wider than Other Fields When Form Is Embedded in My Web Page

  • Profile Image
    Dannilee
    Asked on July 26, 2015 at 05:32 PM

    Hi

    Please can you take a look at my form and advise me how to correct the width of the drop down field, currently it appears longer that the other input boxes in FF.

    http://www.lm-lakeland-design.co.uk/About-Us.html

     

    Thanks

    D

  • Profile Image
    jonathan
    Answered on July 26, 2015 at 06:57 PM

    Hi,

    When I checked the embedded form on your website using Firefox browser, I could not see the inconsistent width issue of input fields in the form.

     

    Are you still having this issue? Can you share to us a screenshot also.

    Perhaps I am checking the wrong thing.

     

    Thanks.

     

  • Profile Image
    abajan
    Answered on July 26, 2015 at 08:31 PM

    Hi D,

    Upon examining the jotform on your web page, I noticed that the right edge of the drop down protrudes beyond the right edges of the text boxes and text area not just in Firefox but also in Chrome. However, the form at its own URL (http://www.jotformeu.com/form/51707972830359) doesn't exhibit this issue in either browser.

    I'm not sure what could be causing the issue because the form is already embedded via an iFrame which is the method we recommend to avoid conflicts with web page scripts and CSS. I've downloaded your web page to my computer to investigate this further. I'll inform you as soon as I find out anything.

    Thanks

  • Profile Image
    abajan
    Answered on July 26, 2015 at 09:22 PM

    Hi again,

    Please do the following:

    1. Go into the form Designer:


    2.
    Click the CSS tab:


    3.
    In the work area of that tab, find the following rule:

    #input_28 {
       font-family : Arial;
       font-size : 14px;
       width : 284px;
    }

    and add !important to its last declaration, as follows:

    #input_28 {
       font-family : Arial;
       font-size : 14px;
       width : 284px !important;
    }

    4. Save the form:


    That should fix it.

    Thanks