IE Input Select Box

Question

I'm looking for the easiest solution to fixing a problem I have in Internet Explorer (6,7 & 8), be it CSS or using jQuery. I have a SELECT Input with a defined width (because of where it sits in the layout). Because of the defined width select is cut off from showing their full values, unlike in Firefox & Safari where they are automatically resized to show the whole length of the value..

Surely this is a common problem? Any ideas?

example code:

<select id="Grouping_662066" class="productSelectInput" name="AddToCart_Grouping" onchange="DrawProduct(36331,662066,this.value,'',true);">
</select>

I'm using a CMS system the class 'productSelectInput' is the only identifier what will be consistand across the website. The ID, name and onchange properties will change.

Answer 1

Given those constraints, the only thing I can suggest for the IE's is to possibly reduce the size of the fonts.

I'm not certain there's a way otherwise.

Answer 2

As far as I'm concerned, this is a browser issue (IE).

You can include   to wrap the options or resize the select dynamically with Javascript on focus and blur events. Also, you could create a drop-down menu with css and javascript (no 'select', but 'ul') and have full control of the interface. (onBlur, javascript should write a the value on a hidden input).

Answer 3

Here is information and a solution using jQuery.

Answer 4

if ie8 supports the psuedo-class :focus you could specify a larger width for when the select is clicked. Won't work in ie6 though, and probably not ie7

Answer 5

it seems to do not work with internet explorer 8