JQuery autocomplete appears behind JQuery menu

Question

I have a JQuery autocomplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autocomplete search but it still doesn't fix the problem. What else should I be trying?

Fiddle link: http://jsfiddle.net/tonyyeb/LKDBh/18/

Answer 1

Thanks for everyone's contributions. I have since found a solution given to me by a forum user:

The autocomplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), >whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -

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

Answer 2

I had a similar issue with a website recently and I've fixed this with the following method:

Make sure that you position both elements absolute OR relative (z-index only works when you use the 'position' css element. So you should either use position: absolute; or postion: relative;. That totally depends on your code/css. When you don't use the position element right now, you should probably use the position: relative; element since the position:absolute; element will position the referring element absolutely which will probably screw up your layout).

Then make sure you give the dropdown a z-index which is lower then the z-index for the menu.

Example

.search-dropdown{
  position: relative; or position: absolute;
  z-index: 1;
}

.jquery-menu{
  position: relative; or position: absolute;
  z-index: 2;
}

Answer 3

Now, you've added

position: relative;
z-index: 1;

to .ui-widget.

Remove it there and add it directly to the dropdown's css which appears when you enter something in the input field (Chrome/Firefox: Right Click on the dropdown and inspect element to see its class/ID).

Hope this helps!

Answer 4

A few months ago I had a similar problem, and searched the web.

The solution was in the CSS styling.

I added an inline class (ui-front) to the element that holds the autocomplete input element.

Not sure it will solve your problem, but it's an easy experiment.

Best of luck!

Answer 5

Question has been posted long time ago. Still, i also have a solution that works and not listed till now . just add this on top of your page and problem should be solved.

.pac-container { position: absolute; cursor: default;z-index:3000 !important;}