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

javascript jquery jquery-ui autocomplete
Martijn picture Martijn · Jul 20, 2011 · Viewed 76.6k times · Source

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

Answer

Ranch picture Ranch · May 20, 2012

Use z-index and !important

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

Related questions

How to remove/change JQuery UI Autocomplete Helper text?

It seems that this is a new feature in JQuery UI 1.9.0, because I used JQuery UI plenty of times before and this text never poped up. Couldn't find anything related on the API documentation. So using an basic autocomplete example …

Read More
jQuery UI autocomplete- no results message

I'm trying to have a "No Results" message appear in the dropdown menu if there are no results. So for instance, if I type in "ABCD" into the text field, and there is no entity that matches, the message "No …

Read More
How to get the next letter of the alphabet in Javascript?

I am build an autocomplete that searches off of a CouchDB View. I need to be able to take the final character of the input string, and replace the last character with the next letter of the english alphabet. (No …

Read More