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

  • Profile Image
    Asked on March 30, 2011 at 06:19 AM


    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.






  • Profile Image
    Answered on March 30, 2011 at 06:28 AM

    Firefox expands the form field and IE does not.

  • Profile Image
    Answered 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:

    .selectscript { width:135px; }
    .ctrDropDownClick { width:200px; }

    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 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.


  • Profile Image
    Answered on May 12, 2015 at 08:57 AM

    Liyam it worked, thanks!

  • Profile Image
    Answered on May 12, 2015 at 11:23 AM

    @Lucas, glad to hear that liyam's code helped you. Please open a new thread if you need any help since this is an old thread. Thank you for understanding.