script.aculo.us autocomplete stuck behind input elements

Question

I've got several script.aculo.us Ajax.Autocomplete controls on a page and when the drop down div is rendered it's always stuck behind the other text boxes on the page, no matter what I do with zIndex and positioning. The problem occurs in IE and FF. Anyone else run into this? Am I missing something, or is this just life with this control?

Answer 1

Well, in my attempt to strip everything down to the basics to post an example, I actually managed to fix it. Two part solution. Firstly, I had to ditch all the z-index definitions in my controls. They were part of the problem. Secondly, I had to go into the show function of the autocomplete control and add: "update.style.zIndex = 1000;" to the function. My autocomplete drop down divs are now above the controls as needed. Perhaps there's another way I could have done things to avoid modifying the script.aculo.us code, but I'm just happy it's working.

Answer 2

Four pages of google'ing, and a bit of time hacking source code later ... Ok, so this may be a year old, but I figured out how to do it for version 1.8.3, and this is for whoever else bumps into this.

To get multiple div's to go on top of each other via the z-index:

First, you need a global variable. i.e. :

var global_zindex

then when you initialise the new draggable, in the onStart, give increment it:

onStart : function(){
  zIndex++;
},

Now we edit dragdrop.js:435 to look like this:

  this.element.style.zIndex = global_zindex //this.originalZ; // HACK HACK HACK

and bam, the div's pile correctly suddenly. This took so long, I had to post this here.