The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.
I make sure that I set my container div to a fixed width and set the overflow to 'hidden', that way when my select list suddenly grows, it doesn't force the div to widen OR overlap any adjacent divs. Without further adieux then, a simple before and after (bear in mind that if you're viewing this in Firefox, you won't see any problem with the first list; it's only BILL'S BROWSER that has the issue):
Here is the code for the samples above:
<style>
.ctrDropDown{
width:145px;
font-size:11px;
}
.ctrDropDownClick{
font-size:11px;
width:300px;
}
.plainDropDown{
width:145px;
font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
<option value="">This is option 1.</option>
<option value="">This is the second option, a bit longer.</option>
<option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
<option value="">This is option 1.</option>
<option value="">This is the second option, a bit longer.</option>
<option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
One More Note:
This solution is a little bit less than perfect in that if you click the select list and don't choose a NEW value, the class doesn't switch back until you actually blur, or click off of, the select list. I have been unable to find a solution to that one anomaly, so if anybody out there has an idea, please do share!
Hope this helps somebody.
Doug out.
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
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';"
:(... so close. Darn IE6.
Thanks for this nice solution Doug :)
I was looking for soultion on this issue for quite some time.
Is there any way to fix double click issue in IE6?
Thanks!
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.
nice one.
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.
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!
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);
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;""

