Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

IE7 dropdown z-index conflict other czhz containers #74

Closed
askibinski opened this Issue Jul 26, 2011 · 16 comments

Comments

Projects
None yet
9 participants

In IE7 other chzn-containers always display over the dropdown div. Also visible if you goto the example page with a native IE7 browser.

This is probably a z-index issue. I'm trying to track the problem down. Otherwise the widget seems to work great in IE7.

I'm struggling with this issue too. The widget works GREAT on Chrome, FF, Safari, Opera, IE9 -- but chokes on IE7.

Found a couple of links about it:
http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7
http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/

Apparently IE 7 has a "z-index bug" and some people have solved it with "position: relative" CSS tags. I'm trying to implement it for the widget to work but no success yet.

Fixed it on my own fork and made a pull request. Try it out! :-)

I implemented this solution: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

I agree this might be the best way to fix it, but it would be safer to only do this for IE7?

if ( $.browser.msie && parseInt($.browser.version, 10) < 8 ) {
...
}

@askibinski askibinski closed this Jul 27, 2011

You are absolutely right.

I was thinking of doing:

if ($.browser.msie && parseInt($.browser.version) == 7) {
...
}

to target IE 7 only.

I hope it fixes your issue too!

Yep, it fixes the issue. But it would be much cleaner if this could be fixed in CSS.

I had to solve it quickly, I apologize for the dirtiness of it.

How would you fix it?

Well the solution would be to make each parent div a higher negative z-index than his child.

This means the entire 'chosen' container would need something like -1000 and the dropdown itself -100 and all parents between need to have decrementing values.

Was a fix for this merged? I'm still seeing it. If it was not merged, can we get a link to the proposed fix branch?

jlank commented Aug 3, 2011

I just fixed this (and then came here to see if it was listed as a bug yet d'oh!). Anyways, the 2 lines below should do it in the jQuery source (haven't had a second to look at the coffee script yet).

 Chosen.prototype.close_field = function() {
      $(document).unbind("click", this.click_test_action);
      if (!this.is_multiple) {
        this.selected_item.attr("tabindex", this.search_field.attr("tabindex"));
        this.search_field.attr("tabindex", -1);
      }
      this.active_field = false;
      this.results_hide();
      this.container.removeClass("chzn-container-active");
      **this.container.css("z-index", "");**
      this.winnow_results_clear();
      this.clear_backstroke();
      this.show_search_field_default();
      return this.search_field_scale();
    };
    Chosen.prototype.activate_field = function() {
      if (!this.is_multiple && !this.active_field) {
        this.search_field.attr("tabindex", this.selected_item.attr("tabindex"));
        this.selected_item.attr("tabindex", -1);
      }
      this.container.addClass("chzn-container-active");
      **this.container.css("z-index", "4000");**
      this.active_field = true;
      this.search_field.val(this.search_field.val());
      return this.search_field.focus();
    };

when the div is active, it gets a z-index of 4000, when it is inactive, the z-index goes away.

That patch works for me.

gorandev commented Aug 3, 2011

It didn't do it for me. The overlapping elements are in separate s and therefore they are in different z-index contexts -- so it doesn't work.

Reference: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Not pretty, but this works:

$(".chzn-choices input").live('hover', function(){
      $('.chzn-container').css('zIndex',1);
      $(this).closest('.chzn-container').css('zIndex',100);
  });

taitems commented May 2, 2012

Just for clarity:

I didn't have any luck with the fix from @jlank because two Chosens and their parents were competing with each other for top-most priority in IE7. I fixed this by doing:

  this.container.css("z-index", "");
  this.container.parent().css("z-index", "");

And

  this.container.parent().css("z-index", "4000");
  this.container.css("z-index", "4000");

I know it's not the cleanest code, but it got it working for me.

this patch works for me ..thanks guys...

JDeuce commented Jul 31, 2012

jlank's fix worked for me.

note that you can also apply his fix to the CSS with a simple rule like:

.chzn-container-active { z-index: 4000; }

pironim commented Nov 15, 2012

taitems fix working great. thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment