Dropdownlist width in IE

by

Here’s another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Use it in combination with this piece of CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

All you need to do is to add the class wide to the dropdown element(s) in question.

<select class="wide">
    ...
</select>

Here is a jsfiddle example. Hope this helps.

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. Why don’t self-closing script elements work?
  3. jQuery Get Selected Option From Dropdown
  4. Do HTML5 custom data attributes “work” in IE 6?
  5. How to get all selected values of a multiple select box?
  6. Avoid dropdown menu close on click inside
  7. Open links made by createObjectURL in IE11
  8. Get selected option text with JavaScript
  9. Input placeholders for Internet Explorer
  10. How to start automatic download of a file in Internet Explorer?
  11. Can I load an entire HTML document into a document fragment in Internet Explorer?
  12. Can I force a link to open in a specific browser?
  13. Does IE8 out-of-the-box have support for ‘localStorage’
  14. How to use jQuery to select a dropdown option?
  15. How to make Internet Explorer emulate pointer-events:none?
  16. How to add Drop-Down list () programmatically?
  17. How to automatically allow blocked content in IE?
  18. Links in dropdown options
  19. Show a second dropdown based on previous dropdown selection
  20. “pointer-events: none” does not work in IE9 and IE10
  21. Changing the type in IE with JavaScript
  22. Bootstrap dropdown closing when clicked
  23. use a javascript array to fill up a drop down select box
  24. How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?
  25. img onload doesn’t work well in IE7
  26. How to disable elements selection and resizing in contenteditable div?
  27. Why does Firefox react differently from Webkit and IE to “click” event on “select” tag?
  28. IE6 Hover Issue
  29. onchange / onclick in a checkbox doesn’t work in IE
  30. Showing Placeholder text for password field in IE

Leave a Comment