jQuery UI Autocomplete with scrollbar z-index help

Question

I have a textbox that I am attaching jQuery UI's Autocomplete functionality to and I am using CSS to give it a max height via the example here. My problem is that doing this causes the z-index problem that bgiframe solves to come back again, but in a different way. The initial autocomplete menu is above all the controls underneath it, but when I begin to scroll the autocomplete menu falls behind them.

Any suggestions?

EDIT:

This is purely an IE6 bug.

As you can see, after scrolling down the autocomplete falls behind the other controls.

Answer 1

You need to reverse the z-index order of the form elements (or their containers) using javascript. I.e., "Social Worker" has the lowest, "DX Code" the highest z-index.

Answer 2

I could solve the problem by replacing offsetHeight by scrollHeight in the following line (from jquery.bgiframe.js) :

height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

This change solved the bug for the autocomplete fields with vertical scrollbars. I could not spot any regression in other kinds of dialogs (but I did not run extensive tests).

Answer 3

You could change the offsetHeight to scrollHeight, like Siggen says, but I have encountered problems when there is only 1 result returned from the autocomplete. The 1 result is squished into a window that only like 2 pxs high. I found a fix though. When you have a data.length<2, you should use the offsetHeight, rather than the scrollHeight.

You have to modify autocomplete.js.

Locate this code:
if($.fn.bgiframe)list.bgiframe();

And make it this:

if($.fn.bgiframe){
    if(data.length<2)
       list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
    else 
       list.bgiframe();
}

Remember, this code should be used in combination with Siggen's fix.

Answer 4

I have used a combination of both parameter for the height like this:

'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'

Look at the max function. Now it is good with no scroll bar (shorter list and longer list as well)

and now the autocomplete component looks perfect in IE6.