JQuery autocomplete appears behind JQuery menu

tonyyeb · 16 Jan 2014 at 11:13

Hi guys

Can anyone help with this problem? 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/

Thanks in advance

cotton31 · 16 Jan 2014 at 12:09

It's because the top level list items have a z-index of 100 I think.

Code:

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
z-index: 100;
display: inline;
float: left;
}

You'd need to find out the html that is displayed for the autocomplete drop down, and give it a higher z-index...

visibleman · 16 Jan 2014 at 12:41

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 -

Code:

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

tonyyeb · 16 Jan 2014 at 12:55

visibleman said:
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 -

Code:

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

Give that man a million pounds!! Thank you so much!! I've been banging my head on a brick wall for the past two days over this ha!!

Phunky · 16 Jan 2014 at 15:56

Just remember that !important declarations should be avoided where possible, in this scenario it will be fairly safe but you should really change the fixed value to 100 or even better make it configurable.

tonyyeb · 16 Jan 2014 at 16:03

Funny you should say that cause I've just removed the !Important and changed the value to 999 and it worked. But I was sure I'd tried that?!! :confused:

visibleman · 16 Jan 2014 at 16:29

tonyyeb said:
Funny you should say that cause I've just removed the !Important and changed the value to 999 and it worked. But I was sure I'd tried that?!!

Surprised, it didn't want to know when testing it in jsFiddle with 1.8.18 of the jQuery UI library (this 'bug' has been eliminated in the latest version) :confused:

Phunky - True but i wouldn't have thought it's an issue if used to override fixed styling within libraries/frameworks.

Phunky · 16 Jan 2014 at 16:35

It likely to be fine for this particular situation, but doesn't harm anyone to explain why it's not the most ideal solution for this problem.