jQuery-UI's autocomplete not display well, z-index issue
JavascriptJqueryJquery UiAutocompleteJavascript Problem Overview
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 https://stackoverflow.com/questions/4764710/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
Javascript Solutions
Solution 1 - Javascript
Use z-index and !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
Solution 2 - Javascript
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;
},
Solution 3 - Javascript
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
Solution 4 - Javascript
In the CSS of jQuery UI:
.ui-front { z-index: 9999; }
Solution 5 - Javascript
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);
}
});
Solution 6 - Javascript
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">
Solution 7 - Javascript
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
Solution 8 - Javascript
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.
Solution 9 - Javascript
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
Look at this answer https://stackoverflow.com/questions/3217134/jquery-ui-autocomplete-inside-a-modal-ui-dialog-suggestions-not-showing/16052134#37368238
Solution 10 - Javascript
I was facing same issue, it has been resolved by adding bellow styles:
.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}
Solution 11 - Javascript
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)
Solution 12 - Javascript
add the following
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
Solution 13 - Javascript
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.