Forums

Hi,

How would I skin ac list to be on top of all element? Some of my elements (<ul> and <li>) are on top of ac list.

I tried the styling in my html the classes skinning:

.yui3-aclist-item, .yui3-aclist, .yui3-aclist-content{z-index:30;}

In Firebug I can see the classes are added and z value is 30.

also tried just

.yui3-aclist-content{position:inherit;z-index:30;}

playing around with different position options other that 'inherit' but no joy.

Please assist or give some pointers on skinning ac.

Sorry, missed this one.

The AutoComplete container inherits the stacking context of its parent element. If there are other elements on the page with a higher stacking context than AutoComplete's parent, that could result in those elements appearing above the AutoComplete list.

This will be easier to debug if you can share the HTML and CSS in question (or a link to a live site), but in general you should try giving AutoComplete's parent element "position: relative" and a z-index higher than that of any sibling elements.

Looks like the only way to fix this in 3.3.0 is to manually specify a z-index for the AutoComplete list in JS.

Try changing your AutoComplete config to this:


I've fixed this bug in git, and the fix will be in 3.4.0.

Thanks, that works like a charm!