jQuery-UI's autocomplete not display well, z-index issue

I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.

In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.

Any help is welcome!

Martijn

Answers


Use z-index and !important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1


In the CSS of jQuery UI:

.ui-front { z-index: 9999; }

Try this, you can manipulate the z-index on runtime or initializing

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.

jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.

So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000

Taken from http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

also have a look at where you are appending the item to. i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.


Give it a try anyway in your css (before script loading), not in firebug:

.ui-selectmenu-menu {
    z-index:100;
}

In my case this works and creates z-indexes like : 100x (for example 1002)


add the following

.ui-autocomplete
{
    z-index:100 !important;
}

in jquery-custom-ui.css file (or the minified one if you are using it).


For those developers that still use this plugin. Try this:

.acResults
{
    z-index:1;
}

For me was enough with z-index:1, set the value you need in your case.


Need Your Help

How to set time zone of a java.util.Date?

java date timezone java.util.date

I have parsed a java.util.Date from a String but it is setting the local time zone as the time zone of the date object.

Python: How to toggle between two values

python toggle

I want to toggle between two values in Python, that is, between 0 and 1.