I did Google about this issue but didn’t find any best solution, so I created a solution based on JQuery that works fine in all browsers.
just call badFixSelectBoxDataWidthIE() function on page load.
function badFixSelectBoxDataWidthIE() { if ($.browser.msie) { $('select').each(function() { if($(this).attr('multiple') == false) { $(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).unbind('mousedown'); $(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")); }); } }); } }
0 Comments.