Chosen: Extends beyond height of page after selecting on IE

[phudang]

Dear,

I'm facing an issue: the page extends beyond height after selecting on web browser IE, please take a look in the source code below:

http://jsfiddle.net/cwd7w3rm/4/

Could you please help to give me solutions to solve this issue.

Many Thanks,
Phu Dang.

[tjschuck]

What version of IE?

[phudang]

I'm working on IE 10, thanks.
This issue doesn't occur on Chrome.

[Yustie]

Seems to happen in IE 11 too, which has all the latest updates.

[jmf191]

Occurs in IE8 as well. If you click anywhere on the page, it shifts back down. The main issue with me is that it not only shifts up but it seems to block other click events on the page until second click. (after the first click that shifts the input box back down.)

[jmf191]

I needed to present a demo, so I worked up a quick, and dirty hack that fixed the issue for IE8. I did not test this for other versions of IE.

Add the line:

$('body').addClass("chosen-shift-fix").removeClass("chosen-shift-fix");

To "search_results_mouseup" function in chosen.jquery.js right before it returns.

I'm using Version 1.4.1 and the end result of the function looks like this:

Chosen.prototype.search_results_mouseup = function(evt) {
  var target;
  target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first();
  if (target.length) {
    this.result_highlight = target;
    this.result_select(evt);
   $('body').addClass("chosen-shift-fix").removeClass("chosen-shift-fix"); //**ADD THIS**
    return this.search_field.focus();
  }
};

I've ran into one instance in the past where IE8 did not draw a DOM change from JS until another DOM update occurred. Adding a class to the body forces it to redraw. I don't like this fix, so hopefully someone else with more knowledge of chosen will come up with something better but this will work for me until then.

I love chosen, great work!

[juhog]

I tried the solution mentioned above (body class add/remove) but it didn't work for me.

I was able to find a new solution though.

Chosen.prototype.update_results_content = function(content) {
  return this.search_results.html(content);
};

In the code above, 'content' is an empty string on some occasions. Those situations trigger the page height bug IE. However, for example an empty div won't trigger the bug. So I changed the code to this:

Chosen.prototype.update_results_content = function(content) {
  if (!content.length) {
    content = '<div></div>';
  }
  return this.search_results.html(content);
};

Now I can call .trigger('chosen:updated') and the page height bug doesn't occur anymore. I've tested this on IE8 IE9 IE10 and IE11.

[DefeNder93]

+1

[stephendasmith]

+1

[freaktiful]

+1

[LuoPQ]

In IE, this bug still exist in latest version, until change code like

Chosen.prototype.update_results_content = function (content) {
    if (!content.length) {
        content = '<div\></div>';
    }
    return this.search_results.html(content);
};

@phudang @tjschuck @koenpunt