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

user_368220 0
Viewed 80544

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

autocomplete jquery-ui jquery javascript
13 Answers

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

user_12613250
user_14490890

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;
}
user_19232450

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.

user_5530290
Related