What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

  • Profile Image

    My dropdown fields are getting cut off in Internet Explorer but not Firefox

    Asked by Britishinstitute on March 30, 2011 at 06:19 AM

    Hi

    My form is a test with a question and then a dropdown box with the options. It works perfectly in Firefox but in Internet Explorer some of the options are truncated/chopped off and one cannot see them properly. Actually I noticed that Firefox expands the bos but IE does not.

    ANything I can do about this, apart from making the box wider or my questions narrower? I am using a preset template where I cannot alter the width of the column containing a text box and image...

     

    See q41 and 48 in webpage below in Internet Explorer.

     

    See http://www.britishinstitute.se/text1_3.html

     

    Thanks

    Lesley

    Page URL:
    http://www.britishinstitute.se/text1_3.html

    browser Internet Explorer Firefox Fonts
  • Profile Image

    Answered by Britishinstitute on March 30, 2011 at 06:28 AM

    Firefox expands the form field and IE does not.

  • Profile Image
    JotForm Support

    Answered by liyam on March 30, 2011 at 07:48 AM

    Hello Lesley,

    Unfortunately, this is an IE browser issue and has always been a problem being encountered by all developers.

    Alternatively, the only solution for this is that you will need to get the source code of your form and save it on your webpage and follow this instructions:

    1 Put this inside your <head> tag:

    <style>
    .selectscript { width:135px; }
    .ctrDropDownClick { width:200px; }
    </style>

    2. Find the <select ...> tags for your q41 and q48.

    a. Replace your q41 select tag:

    <select class="form-dropdown" style="width:135px" id="input_66" name="q66_41If">

    With this:

    <select class="form-dropdown" id="input_66" name="q66_41If" onBlur="this.className='selectscript';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='selectscript';">

    b. Replace your q48 select tag:

    <select class="form-dropdown" style="width:135px" id="input_77" name="q77_48We">

    With this:

    <select class="form-dropdown" id="input_77" name="q77_48We" on onBlur="this.className='selectscript';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='selectscript';">


    Hope this helps.

  • Profile Image

    Answered by Britishinstitute on March 30, 2011 at 07:59 AM

    Hi Liyam

    You are so kind to give me all the code. Unfortunately although I can access the source code for the form, I cannot access anything inside my <head> code of my webpage. And if I have read correctly, then I need to be able to enter code inside the <head> tag.

    I think i have to make  the dropdowns wider, use the iframe code and redesign the webpage (I have made a new ome and used a table) to allow me to have wider dropdown boxes.

    Thank you for your help.

    Lesley