Autocomplete dropdown positioned incorrectly in IE

[amasniko]

The problem is reproducible with both IE 8 and 9, but works fine in Firefox. When the screen has to be scrolled down to reach the input element on which autocomplete is enabled, after the first keystroke the dropdown appears somewhere above the input. On the second keystroke it moves to the correct position.

You can try try it here (make sure you use IE): ​http://jsbin.com/eyipab/1

Fortunately, the fix is very simple. Just adding this to the style corrects the problem:

.ui-autocomplete {
	left: 0;
}

It turns out that the "left" value is "auto" by default and the code in that case takes a different path.

[tj.vantoll]

Thanks for taking the time to contribute to the jQuery UI project! Your test case is in quirks mode which jQuery and jQuery UI do not support. If I add a doctype to your test case it functions fine in IE8 and IE9 - ​http://jsbin.com/eyipab/6.

[amasniko]

Fair enough, I over trimmed the test case. I put back the some style to html and body elements I had initially removed and even with the doctype declaration IE exhibits the problem.

Now, I do not quite remember why I had to add that style. There are quite a few more nested elements on the real page and I needed them to get the effect I wanted. Regardless, I think the style is still valid and the dropdown should appear where it is supposed to like it does in Firefox.

The modified page is here ​http://jsbin.com/eyipab/9

[Scott González]

I don't think we support the styles you're setting on html/body, but this is an easy fix.

[Scott González]

Autocomplete: Set initial left position for menu. Fixes #8749 - Autocomplete dropdown positioned incorrectly in IE.

Changeset: d693ce5324f6f3be8479ef083e4eaf3c705ef043

[Scott González]

Autocomplete: Set initial left position for menu. Fixes #8749 - Autocomplete dropdown positioned incorrectly in IE. (cherry picked from commit d693ce5324f6f3be8479ef083e4eaf3c705ef043)

Changeset: 8f0daea9eb0b5e6feb31b1e69878919bce78cef1