IE 7 and z-index

[camainc]

I would love to use this plug-in in my current project, but it is not working in IE-7 (which I have to support). The z-index issue is killing me, and I'm not versed enough in javascript to be able to track down and fix the issue on my own. Also, the formatting of the selected tags seems to be very different (and much uglier) in IE 7 than in a modern browser such as Chrome. The words in the tags wrap, causing the spacing and alignment to look really weird.

I know that no one likes or wants to support older browsers, but unfortunately those of us in the corporate and government worlds have to.

[alpha123]

From the FAQ:

What browsers are supported?
All modern browsers are support [sic] (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled.

Basically, you're asking for IE 7 support. That would be hard, but not impossible.

[camainc]

I understand. I'll just have to find another plugin to do the job. I really like the way this one works, it's too bad I can't use it.

[alpha123]

I'm going to evaluate how much effort it would take to get this thing to work in IE 7. It's probably not too hard, since jQuery (and Prototype) support IE 7.

[alpha123]

Okay, so I after about a half hour I hacked it to get rid of the z-index issue. This article was very helpful.

I simply changed

$.fn.extend({
  chosen: (options) ->
    return this if $.browser is "msie" and ($.browser.version is "6.0" or  $.browser.version is "7.0")
    $(this).each((input_field) ->
      new Chosen(this, options) unless ($ this).hasClass "chzn-done"
    )
})

to (note that I have no experience with CoffeeScript)

$.fn.extend({
  chosen: (options) ->
    return this if $.browser is "msie" and $.browser.version is "6.0"
    $(this).each((input_field) ->
      new Chosen(this, options) unless ($ this).hasClass "chzn-done"
    )
    if $.browser is "msie" and $.browser.version is "7.0"
      zIndexNumber = 10000
      $('.chzn-select').each(() ->
        $(this).css('zIndex', zIndexNumber)
        zIndexNumber -= 1
      )
    this
})

which is terribly hackish but works, at least in IE 9 compatibility mode for IE 7. Note that basically it destroys all your z-indexes, so it's not really a great idea, but it's the best I can come up with for now.

[camainc]

I appreciate your work on this. I'll give it a try on Monday.

[worzy]

I had the same problem with my form. The chosen disappearing under all other elements in IE7.

Each of my form elements have outer containers so I wrote this "hacky" code to get around the issues.

var j = 3000;

$(".chzn-select").each(function() {
   
   $(this).parent().css({'position':'relative','z-index':j});
   j = j-1;

});

After render loop through all elements and add a z-index to the parent. If more than one chosen element is on the page decrement the value so the elements above float over the top.

[jaloka]

Just my two cents but +1 on fixing this. Wonderful widget but needs fix as there will often be multiple instances on page. I'm surprised this hasn't come up before. Cheers

[ipenburg]

I like the way Chosen works, but I need it's functionality on a multiple select containing about 5000 options, in IE7. The IE7 fallback to the normal select with 5000 options is so user-unfriendly that I can't use that. I could patch Chosen to include AJAX autosuggest to make it handle those 5000 options in the first place, but if Chosen isn't aiming for IE7 support I'd rather drop Chosen and roll my own widget that does support enterprise environments. So, is IE7 support for Chosen a dead end?

[alpha123]

@ipenburg Chosen support for IE7 is not a dead end. See this and this.

[ipenburg]

I can get Chosen to work in IE7 in my particular project, but I was wondering, if it is relatively easy to get it working in IE7, why isn't there commitment from the core developers to support IE7? Because without that commitment I don't like to be the one to backport every new release to support IE7.

[worzy]

Hi ipenburg,

We have been using Chosen in a couple of projects recently and have a commitment to support ie7. In each project we have amended the code to support IE7 in the layout we have for that project. So, if you are okay with javascript/css concepts I don't see why you couldn't do the same. Obviously this does harm the ability to upgrade to later versions, but if the developers have stopped supporting IE7 I don't see why you would upgrade anyway.

[ipenburg]

I see a lot of room for improvement for Chosen in general, so I'd like to keep upgrading to newer versions an easy option. But I haven't yet really looked into the can of worms that the IE7 issues on a wider scale might be, and it's not like there is a bunch of tests that gives an overview of the scale of failure in (unsupported) browsers.

[stof]

@ipenburg AFAIK, a big issue with IE7 is the z-index when using several instances of Chosen on the page as IE7 does not handle z-index in the appropriate order (and so the different instance will look really weird).

[patrickberkeley]

A fix for the IE7-z-index issue -- similar to @worzy's -- is posted here: http://stackoverflow.com/questions/7662944/chosen-js-leaves-dropdown-lists-open-on-page-load-in-ie7

[chrishough]

@worzy thank you for posting that fix, your code hack just helped me solve the same problem in IE7. gosh IE sucks.

[worzy]

@chrishough no problem. IE7 is the bane of my life as well >.<. Glad I could help in this instance!

[alecarg]

+1 for IE7 support :[

[laurenty]

I was really bummed to find out that Chosen didn't work on IE7, but I think the developers made the right decision.
Why bloat their code to support an obsolete browser that was no good even when it first came out.
Simple, you want to use an old browser, you get the old web.

[dantuck]

I just discovered that if Chosen is used in SharePoint you will get this horrible IE7 bug if you are running the native IE8 browser. SharePoint puts this meta data at the top of every page thus forcing IE7. .

Just because IE7 is obsolete doesn't mean that some of the largest enterprise software companies don't force your websites to be in IE7 mode. I am running SharePoint 2010 and that is the case for me.

[dantuck]

If you are interested in a fix when running IE8 in compatibility mode then check out this pull request: #751

[codinglord]

@alpha123 , you saved my life :)

[pfiller]

I do not consider it a priority for Chosen to support IE7. It will continue to fail gracefully for IE7 and lower users.