In Mozilla and non-IE browsers, if the option of select list is of a greater length than the select's width, it will show up. But in IE, it will crop the option up to the select's width.
Is there any way to make IE's select behaviour to be like that of non-IE browsers?
This seems to work well in forcing IE to reevaluate the select width. Works in IE7 and IE8.
if (jQuery.browser.msie) {
jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
css:
.set_width { width:120px; }
html:
<select class="set_width"><option>one</option><option>two</option></select>
I like 26design's solution but it has 2 flaws:
Under some circumstances it is possible to fire the mouseover event twice resulting in the origWidth variable getting set to "auto" preventing the select ever reverting to original size.
If the text values in the drop down do not need extra space then the select actually shrinks which looks odd.
This version fixes both of these issues:
if($.browser.msie) {
/* IE obscures the option text for fixed-width selects if the text
* is longer than the select. To work around this we make the width
* auto whenever the drop down is visible.
*/
$("select.fixed-width").livequery(function(){
/* Use mousedown rather than focus because the focus event gets
* interrupted and the dropdown does not appear
*/
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
}
Tested in IE6-8
I placed in a table cell, just trying to keep the same width with the cell.
$("#id" ).width($("#id" ).parent().width());
btw, thanks for all the posts, it helps me a lot.
The best solution described here: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.
<script type="text/javascript">
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
</script>
The Select Box:
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
The absolute easiest way to make sure select lists are always exactly as wide as they need to be is to allow the browser to set their width, i.e. don't set a width yourself. This "method" (really a non-method, as it involves not doing something) will work on every browser ever made, even IE6.
I have a solution that works for me, so I figured I'd go ahead and post it (with some caveats at the bottom). It's not the most efficient use of jQuery, I'm sure, but it's working how I want it to work. Basically, I have a list of timezones that are (obviously) rather long text strings.
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function() {
$("select.timeZone")
.mouseover(function() {
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto")
.focus();
})
.mouseout(function() {
$(this)
.blur(function() {
$(this).css("width", $(this).data("origWidth"));
})
.change(function() {
$(this).css("width", $(this).data("origWidth"));
})
});
});
</script>
<![endif]-->
Description:
Caveats:
Here's another approach that worked for me:
<style>
select.limited-width {
width: 200px;
position: static;
}
select.expanded-width {
width: auto;
position: absolute;
}
</style>
<select class="limited-width"
onMouseDown="if(document.all) this.className='expanded-width';"
onBlur="if(document.all) this.className='limited-width';"
onChange="if(document.all) this.className='limited-width';">
<option>A normal option</option>
<option>A really long option which messes everything up</option>
</select>
By switching to position:absolute you remove the element from the page flow, which helps if you find your select box moving when you expand it.
I've chosen to rely on sniffing document.all as a check for IE as it keeps it compact and avoids the need for a separate function. If that doesn't work for you, define a function within IE conditional comments and call that instead.
One small bug, if you select the same element it won't shrink again until you move the focus to another element, I'm calling it a feature ;-)
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
I used this way to showed the drop down list when the width is not showed correctly.
It work for IE6, Firefox and Chrome.
I have select's in table cells and the following code did the trick for me:
.myClass{
width: 100%;//most of browsers
_width: auto;//ie6 hack
}
Cheers
