Home ›

So your dropdowns won't open in IE7?

Matthias Reuter's picture
by Matthias Reuter on Fri, 11/11/2011 - 10:46
in

So Microsoft recently published a security update for Internet Explorer, which had the side effect, that in certain circumstances dropdowns (that is a select element) won't open.

In short, if your page runs within an iframe from a different domain than the embedding page, your dropdowns will stay closed. You can still use the arrow keys to navigate through the options; if your users can do so too is another question.

See the bug in action:

The recommended fix, says Microsoft, is to upgrade to Internet Explorer 8. I think, this is great advice and we should stop at that point.

Still there might be the slight chance that our users won't do that (why else would we still have 10% IE7 users?). What are the alternatives?

The first idea is to replace the select with some nested div construct that mimics the behaviour of a dropdown. For jQuery, there are numerous plugins available. (I would love to use Chosen, but that does not run in IE7).

Using a plugin might force you to update your css, and you might not want to do that. A second approach is to set the size of the select element to the number of options. This is quite ugly. Imagine a country select box with 200 entries, now instead of one line it would cover 200. If we only expand the size on click and shrink it after a selection, the uglyness is reduced. See the workaround in action at this JSFiddle.

So it comes down to something fancy (and all users benefit from it, not only IE7), which might require some extra work for CSS and Javascript, or to something ugly (but only for IE7) which can be done quickly.

If you decide to do the latter (and have jQuery), you can use the following code:

  1. (function ($) {
  2.  
  3. /* Workaround for bug !http://support.microsoft.com/default.aspx?scid=kb;en-us;2628724
  4.  *
  5.  * In IE7 a recent security update lead to the bug that select elements
  6.  * cannot open in iframes of a different origin.
  7.  *
  8.  * The workaround is to set the size of the select element to the number of
  9.  * options within on click, and reset the size on a second click (or blur).
  10.  */
  11.  
  12.     function toggleSizeOfSelectToNumberOfOptions(event) {
  13.         var oldSize, newSize;
  14.        
  15.         oldSize = +this.getAttribute("size") || 1;
  16.         newSize = 1;
  17.        
  18.         if (event.type === "click" && oldSize === 1) {
  19.             newSize = this.options.length;
  20.         }
  21.        
  22.         this.setAttribute("size", newSize);
  23.     }
  24.  
  25.     function browserMightBeAffected() {
  26.         return $.browser.msie && $.browser.version === "7.0";
  27.     }
  28.  
  29.     if (browserMightBeAffected()) {
  30.         $("select").bind({
  31.             "click" : toggleSizeOfSelectToNumberOfOptions,
  32.             "blur" : toggleSizeOfSelectToNumberOfOptions
  33.         });
  34.     }
  35.  
  36. }(jQuery));

If you have users of IE7 with javascript disabled (do those really exist?) you either have to teach those to use the arrow keys, or you have to set the size of the select element on the server.