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

Question

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

Will this help you? http://stackoverflow.com/questions/3549860/im-having-trouble-with-jquery-ui-autocomplete-and-slider-on-the-same-form-z-ind — Tim, Jul 20 '11 at 12:53
Since there's no code examples I might recommend to set z-index as you tried before and set it to `!important` — Igor Dymov, Jul 20 '11 at 12:54
I am having the same problem, but the bug is coming in Chrome only. No solution here is seems working. Can any one help me out? — Nivs, May 29 '15 at 06:46

score 107 · Accepted Answer · edited Oct 03 '18 at 17:08

107

Use z-index and !important

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

edited Oct 03 '18 at 17:08

Brian Webster

30,033
48
152
225

answered May 20 '12 at 18:19

Ranch

2,601
4
29
28

It has been a while since I posted this question, but I vaguely remember that javascript (and therefore jQuery) was able to overwrite CSS properties even though they are defined as "!important". – Martijn May 21 '12 at 13:10
1

+1 using !important on my custom stylesheet also worked perfectly well for me and was a much better solution than using the open() callback. – Alex Fairchild Mar 21 '13 at 18:30
I've accepted this answer in favor of my own, since I agree this solution is much nicer. I haven't checked the answer though.. – Martijn Jun 28 '13 at 07:22
I am new to jQuery and this answer is very good. Worked for me. I had a trouble finding where .ui-autocomplete was, but finally found it in jquery-ui.css gave it the z-index and viola it worked! – atsurti May 29 '14 at 03:19
Great answer. Also worked with me. Just to add a couple of tidbits. First, the autocomplete data is contained within a class called ui-autocomplete, which can then be styled in your css as above. Second, if you're using autocomplete with Bootstrap, a menu that's always on top has a z-index of 1030, so you will need to make this 1031. Great sol'n. Thx. – Randy Greencorn Oct 25 '14 at 21:44

score 62 · Answer 2 · answered Jul 20 '11 at 13:28

62

While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

answered Jul 20 '11 at 13:28

Martijn

5,491
4
33
41

2

Why are you returning false? – Noyo Feb 08 '13 at 14:28
The general paradigm in event handlers is that returning false will prevent an event from bubbling up. Though after four years I have no idea whether it was actually necessary in this situation.. – Martijn Aug 19 '15 at 10:37
2

Thanks for the response, even if it's years later! Indeed, this is not needed in your case, and may even cause unwanted behavior in others.. In any case, this issue has a standard solution now (`ui-front` class + `appendTo` widget option): https://api.jqueryui.com/theming/stacking-elements/ – Noyo Aug 19 '15 at 15:45

score 10 · Answer 3 · edited Jan 10 '14 at 00:59

10

In the CSS of jQuery UI:

.ui-front { z-index: 9999; }

edited Jan 10 '14 at 00:59

digitalextremist

5,952
3
43
62

answered Jan 10 '14 at 00:31

maseo

109
1
2

1

Welcome to StackOverFlow.com this should be a comment or a more elaborate answer. – Diego C Nascimento Jan 10 '14 at 00:55
that's wrong, when jquery ui needs to popup something new it just takes the previous z-index and increases it by 1, using 9999 makes it only work once, the next ui element will have a z-index of 10.000 causing again the issue. – Andrea Mauro Jul 26 '19 at 16:31

score 10 · Answer 4 · answered Mar 10 '12 at 17:40

10

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

answered Mar 10 '12 at 17:40

Gratian

101
1
2

1

The autocomplete is added to the end of the body's content, so it will then have the bodys z-index+1 – Marius Jan 10 '13 at 15:51
8

@Marius, you can use the [`appendTo`](http://api.jqueryui.com/autocomplete/#option-appendTo) option to tell the menu markup where to go, otherwise you can add the class `ui-front` to one of the input's parent elements. – Noyo Feb 08 '13 at 14:23
1

One more thing: The parent div must use relative positioning ('position: relative') otherwise jQuery won't be able to determine its z-index (see http://bugs.jqueryui.com/ticket/5489) – Felix Schwarz Mar 08 '13 at 08:31

score 9 · Answer 5 · answered May 03 '13 at 11:04

9

Try this, you can manipulate the z-index on runtime or initializing

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

answered May 03 '13 at 11:04

Ipad

393
1
6
22

score 3 · Answer 6 · edited Oct 01 '15 at 11:12

3

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

edited Oct 01 '15 at 11:12

Anders

8,307
9
56
88

answered Oct 01 '15 at 10:58

raviraj shimpi

31
1

score 2 · Answer 7 · answered Sep 25 '13 at 23:16

If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.

jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.

So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000

Taken from http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

score 0 · Answer 8 · answered Mar 15 '13 at 03:56

0

also have a look at where you are appending the item to. i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.

answered Mar 15 '13 at 03:56

pgee70

3,707
4
35
41

score 0 · Answer 9 · answered Jul 26 '19 at 16:35

0

If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.

Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

answered Jul 26 '19 at 16:35

Andrea Mauro

773
1
8
14

score 0 · Answer 10 · edited May 16 '22 at 15:35

0

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

edited May 16 '22 at 15:35

Tyler2P

2,324
26
22
31

answered May 16 '22 at 10:38

Sunil Gakhar

1
1

score -1 · Answer 11 · answered Aug 12 '13 at 10:36

-1

add the following

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

in jquery-custom-ui.css file (or the minified one if you are using it).

answered Aug 12 '13 at 10:36

Zeeshan Ali

343
5
6

score -1 · Answer 12 · answered Oct 24 '16 at 18:26

-1

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.

answered Oct 24 '16 at 18:26

Yasel

2,920
4
40
48

score -1 · Answer 13 · answered Jul 20 '11 at 12:56

-1

Give it a try anyway in your css (before script loading), not in firebug:

.ui-selectmenu-menu {
    z-index:100;
}

In my case this works and creates z-indexes like : 100x (for example 1002)

answered Jul 20 '11 at 12:56

avall

2,025
2
16
28

1

For some reason, setting the z-index through CSS isn't working. jQuery simply assigns it's own z-index value. Did find a solution though (see answer below) – Martijn Jul 20 '11 at 13:28

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

13 Answers13

Linked