I really prefer Firefox's handling of this. Another option is to set the title attribute of the option tag to the same option label text. On hover of the option a little pop up will show you the full label. This is also useful in Firefox because if the select list is along the right edge of a users screen, the option list will go off the screen. The title attribute however in both browsers stays on screen. One drawback is the file size of the page can be increased for a large list but the title attributes could probably be populated on load with js to reduce this issue.

By the way, when I said "I really prefer Firefox's handling of this" I didn't mean I disagreed with your approach. I just with IE would do the reasonable thing and switch to handling this like Firefox.

Thanks for the suggestion, Daniel! This is just the kind of thing I hoped would start coming out of the woodwork. Had I actually FOUND what you suggested BEFORE I implemented my solution, I DEFINITELY would have used it instead...much simpler, much cleaner. :)

Thank you thank you thank you! This is exactly what I needed today. Thanks again!

No problem Slade! And hey, if you come up with anything that works better, be sure to share it back here, okay? :)

This seems to work in IE, when you click the dropdown and select the same value, but it is even more messy approach.

Since it requires two clicks to select a value in combo

add a global var

var inCombo = false;


if the user leaves combo without second click, reset it
onBlur="this.className='ctrDropDown'; inCombo = false"

and set the onMouseUp event, to check for the second click, even on the already selected item
onMouseUp="inCombo = !inCombo; if(inCombo) this.className='ctrDropDownClick'; else this.className='ctrDropDown';"

sup sup sup sup thnaks

This solution is very nice, however, in IE6 you have to click twice on the select menu to be able to see the drop down.

:(... so close. Darn IE6.

Thanks for this nice solution Doug :)

Thanks for the solution.

I was looking for soultion on this issue for quite some time.

Is there any way to fix double click issue in IE6?

Thanks a lot, saved my day. It would be very nice to have a fix for the double click issue for me too ;-)

Thanks!

works excellent, BUT:
I dynamically generate complex form and I don't know in advance how long will data in select box be. So, I switch between values "auto" (which will adjust to size of the longest text when opened) and "150px" (which visually fits to page). The problem occurs when there are only short texts - when I click the right part of select, it reduces its size (to the optimal size) and not open. It is ugly and dumb for user.
Anyone has any idea? thanks in advance.

hey thanks for the idea..
nice one.

Hi...
I was stuck up with this Ie problem. I copied the script into a new js file and included the class in the select box. But, it did not work. Can you please help me out of this situation...

Bye,
Sai.

Thanks for investigating and then posting your conclusions, it's a big help to the development world :) What a mess this is! How could IE think that restricting the width of the options is a usable feature at all? I could understand them having some creative differences at the heart of some of their issues but this is just plain wrong.

It seems like the best solution would be to replace default select boxes - which have always had trouble in IE all the way back to z-indexing - with custom select box widgets. Your solution looks like a good second place option for those who can't do that, though. Again, thanks for identifying and publishing the issue!

Great use of overflow:hidden !

I would never imagine, that it would only apply to the actual select control and not to the drop-down list. I was looking for a solution for a long time. My client complained about the cut-off issue, and in the same time did not accept any changes to the UI layout. Nor did they accept temporary "jumpy" UI, when the drop-down control is re-sized on mouse hover.

I went as far as researching custom widgets to do the job, but I wasn't happy with any of them.

Thanks to this tip, I came up with the following jQuery solution:

function selectDropDownIEbehavior() {

// Apply this behavior for IE only
if (!$.browser.msie)
return;

var expand = function()
{
var width = $(this).css("width");
// Don't overwrite the stored original width,
// if the event occurs for a second time before contract()
if (width == "auto")
return;

$(this)
.data("origWidth", width)
.css("width", "auto")
};

var contract = function()
{
var width = $(this).css("width");
// Don't perform this twice
if (width != "auto")
return;

var origWidth = $(this).data("origWidth");
// If the original width was not stored, abort
if (origWidth === undefined)
return;

$(this)
.css("width", origWidth)
.data("origWidth", width);
};

$("select").each(function(index) {

// The select needs to be enclosed in a container with the same CSS width,
// which uses overflow:hidden, in order to hide the expanded part
var width = $(this).css("width");
var span = '';
$(this).wrap(span);

// Add event listeners
$(this)
.mousedown(expand)
.blur(contract)
.change(contract);

});

}



All I do is import the .js file containing the above function and call the following script in my document, which applies the fix to all select boxes when the document is ready:


jQuery(document).ready(selectDropDownIEbehavior);

Oops, looks like it stripped the html line from the script.

replace

var span = ";

with

var span = 'span style="padding: 2px; width:'+width+'; overflow:hidden; float:left;"';

and make the line in single quotes valid html by inserting "<" before "span" and "/>" after "left;""

Thank you, well done.

Thanks Paul! Code works nicely, and saves me from pulling out ALL of my hair :-) Awesome job.