9

The default behavior for the jQuery Autocomplete widget is to position the results list one z-index level above the input so that the latter is always visible but in my case this has the undesirable effect of overshadowing the text input element.

I tried to set the z-index value input element at least one level above that of the result list from within the open method like so without much success:

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

The z-index level for the input element does get promoted to 10000 while that of the results list remains at level 1 but the input element still appears underneath it.

Does anyone have a clue on why this is happening? The position attributes for the results list and input element are set to absolute and relative respectively. Could that be the cause?

Ziad
  • 1,036
  • 2
  • 21
  • 31
  • But why? Is there something that's wrongly overlapping? – Robin Maben Aug 26 '12 at 15:48
  • Yes, the box shadow around the results list actually. I want to keep the shadow effect but don't want it to show on top of the input element. – Ziad Aug 26 '12 at 19:14
  • Can you not offset the shadow in such a way that its visible only on the right and bottom edges? – Robin Maben Aug 27 '12 at 05:01
  • I see you're adopting the KISS principle here Robin. That's fine but I'm also planning to overlap both elements vertically and then remove the bottom border for the input element only such that their borders merge seamlessly together. This approach won't help much here unfortunately. – Ziad Aug 27 '12 at 08:19
  • Hmmm.. I see what you mean. You want them to appear as one seamless control. Fair enough. – Robin Maben Aug 27 '12 at 08:24

3 Answers3

28

You can do it by adding a simple rule to your styleseet:

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

That should do all the work, I tested it in the firebug

d.k
  • 4,234
  • 2
  • 26
  • 38
  • The !important CSS attribute effectively overrides the z-index values set by jQueryUI but my JS code already does that. However thanks for suggesting yet another possibly simpler way to do it. – Ziad Aug 26 '12 at 21:15
  • It does a good job at inverting the z-index positioning relatively to each other but on the rendered page the input element still shows up underneath the results list:( – Ziad Aug 26 '12 at 21:34
  • @Ziad, can you provide a link? – d.k Aug 26 '12 at 21:39
  • What I need to type to the input, to make an input appear? – d.k Aug 26 '12 at 23:09
  • 1
    @Ziad, you have an error in your css selector, it is `class` whereas input has `id` (change `.autocomplete` to `#autocomplete`) Also don't forget to add `position: relative`. http://jsfiddle.net/h4qAC/6/ – d.k Aug 26 '12 at 23:16
  • Thanks caligula...you had it right from the start! Here's the working version: http://jsfiddle.net/h4qAC/8/ cheers – Ziad Aug 26 '12 at 23:32
  • +1 Worked for me, but I only got it to work when I put it within the same view that was using it. (Using MVC here) – Jon Dec 05 '15 at 04:45
13

This code solved problem with z-index for me (jQueryUI 1.8) without any extra CSS or timeouts

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}
EsterniTY
  • 181
  • 2
  • 3
0

You don't really need to fiddle with the z-index - 

.shadow {
  -moz-box-shadow:    2px 2px 2px 1px #ccc;
  -webkit-box-shadow: 2px 2px 2px 1px #ccc;
  box-shadow:         2px 2px 2px 1px #ccc;
}

DEMO

Robin Maben
  • 22,194
  • 16
  • 64
  • 99