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.

alt text

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

score 2 · Answer 1 · answered Jan 28 '11 at 12:10

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).

answered Jan 28 '11 at 12:10

Siggen

2,147
1
19
19

I opened a bug in bgiframe : http://plugins.jquery.com/content/bgiframe-height-wrong-when-wrapping-div-scrollbars – Siggen Jan 28 '11 at 12:24
when I make this change IE6 freezes on me. It freezes when I start typing in the Autocomplete Textbox, saying it is loading one of the jQueryUI images it uses. – rpf3 Jan 28 '11 at 14:39

score 0 · Answer 2 · answered Dec 01 '12 at 11:01

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.

score 0 · Answer 3 · answered Jan 24 '11 at 22:27

0

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.

answered Jan 24 '11 at 22:27

Jens

1

the problem is that the autocomplete box is generated dynamically by the jQuery plugin and deals with the z-index on it's own. I will give this a try though and post results. Thanks – rpf3 Jan 26 '11 at 23:16

score 0 · Answer 4 · answered Mar 28 '11 at 15:07

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.

jQuery UI Autocomplete with scrollbar z-index help

4 Answers4

Linked