Autocomplete issue into bootstrap modal

Question

I have a display problem in the jQuery autocomplete inside a modal dialog bootstrap.

When I mouse scroll, the results do not remain attached to the input.

Is there a way to solve this?

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

EDIT I found the problem:

.ui-autocomplete {
  position: fixed;
  .....
}

If the modal has scroll the issue remains!

Here JsFiddle/1.

Lughino · Accepted Answer · 2016-01-22T15:07:46.260

122

The position is right that it is "absolute", while you need to specify this as an option to autocomplete:

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

Where it can anchor the box with the results in any element, I have to stop it from being anchored to the form's class!

Here is a working JsFiddle!.

edited Jan 22 '16 at 15:07

answered Apr 21 '13 at 18:04

Lughino

4,060
11
31
61

1

Thank you. If anyone had my same issue, it applies also to jquery [autocomplete combobox](https://jqueryui.com/autocomplete/#combobox). Just add `appendTo: ".your-form-in-modal"` to `.autocomplete({` in the `_createAutocomplete` function. – z3d0 Jan 22 '16 at 14:07
Thanks for the solution. However if you remove the textarea, We do see a scrollbar inside modal-body. Any idea how to fix this? Here is a working fiddle: http://jsfiddle.net/TtxqG/410/ – Sagar Gala Mar 02 '16 at 00:49
8

or simply add `.ui-front` to modal window – teran Dec 14 '16 at 20:53
1

teran : This is the quickest answer, thanks ! More accurate, add `.ui-front` to your `.modal-body` div. – tomsihap Dec 25 '16 at 23:25
If indicating appendTo option does not resolve your issue, you can do `appendTo: $(id or class).parent()` – Jose Jet Jul 18 '18 at 10:20
Nice. if you're using the same function for different cases this could be a general solution: `appendTo: $(selector).closest('form')` – fustaki Sep 24 '19 at 06:02
@teran: "simply add .ui-front to modal window" this is amazing ! thank you – Mario Orlandi Dec 02 '19 at 14:47

score 57 · Answer 2 · edited Jan 08 '16 at 23:10

57

The above solution talking about the z-index issue worked:

.ui-autocomplete { z-index:2147483647; }

Make sure you put it before your .js script responsible for handling the modal AND autocomplete logic.

edited Jan 08 '16 at 23:10

Nathaniel Ford

20,545
20
91
102

answered Aug 08 '13 at 15:05

Tolga Köseoğlu

587
4
4

2

If you read the comments of the other answer, which is exactly the same as yours, the problem is not solved in this way! – Lughino Aug 08 '13 at 15:29
6

Worked for me. Regardless of the nay-sayer. – KingOfHypocrites Mar 18 '15 at 19:58
Perfect. No JS. With CSS, this is the best solution. – Koushik Das Nov 06 '17 at 03:08
Your solutions worded for me too. Thank you – Sakhawat Hossain Sep 02 '19 at 17:35
Worked like a charm! – YSFKBDY Sep 02 '20 at 14:34

score 32 · Answer 3 · answered Jul 29 '14 at 17:57

32

Check out the appendTo documentation:

When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element.

So just add the class "ui-front" to the parent element and the autocomplete will be correctly displayed inside the modal.

answered Jul 29 '14 at 17:57

Fernando Pinheiro

1,796
2
17
21

Works great with Foundation 5 reveal-modal. – Dean Richardson Nov 22 '15 at 01:02
Does not work for me. So far, the only thing which does work is hacking the `z-index` which feels wrong. – CXJ May 10 '19 at 20:23
this should be the answer – Leandro Bardelli Jan 09 '21 at 17:15

score 25 · Answer 4 · answered Jul 16 '16 at 13:39

25

With add the class "ui-front" to the div parent element and the autocomplete will be correctly displayed inside the PopUp For Me.

answered Jul 16 '16 at 13:39

Skarimi

251
3
2

3

While the accepted answer will work, I feel like this should be the correct answer, as the docs indicate this as the default behavior: `If an element with the ui-front class is found, the menu will be appended to that element` – cman77 Oct 13 '16 at 16:09
you repeat an already answer 2 years later. See original answer from @Fernando Pinheiro – Leandro Bardelli Jan 09 '21 at 17:16

score 15 · Answer 5 · edited Jan 08 '16 at 23:11

15

The actual issue is that the Bootstrap Modal has a higher Z-index than any other element in the page. Thus, auto complete actually works - but it gets hidden behind the dialog.

You just need to add this in any of your added css files:

.ui-autocomplete {
  z-index:2147483647;
}

edited Jan 08 '16 at 23:11

Nathaniel Ford

20,545
20
91
102

answered Apr 29 '13 at 08:41

Sunil

441
3
11

2

The problem is not just that and not solve anything by putting a parameter z-index so high! The problem is not only the fact that it remains below the modal, but if you make it scroll the page the results do not remain attached to the input, and if you re-read the question well will be explained. However, the problem is resolved, see answer above! – Lughino Apr 30 '13 at 13:42

score 6 · Answer 6 · edited Nov 01 '18 at 19:11

6

To fix this I just needed to alter in the css file by jQuery:

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

Note: Add this css after jquery-ui.css & jquery-ui.js

edited Nov 01 '18 at 19:11

Web_Developer

1,251
2
18
34

answered Oct 08 '15 at 15:41

dsandrade

576
5
9

score 4 · Answer 7 · answered Jan 20 '16 at 15:38

4

just try adding this:

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

Just make sure you give a high value to the property and DO ADD

!important

It really matters. The latter will tell your browser to execute this rule first, before any other of the same class. Hope it will help

answered Jan 20 '16 at 15:38

Ange Kouakou

107
1
4

This is not responsive design – gtzinos Apr 25 '16 at 20:29
I don't get you @gtzinos – Ange Kouakou Sep 21 '16 at 09:38

score 1 · Answer 8 · answered Nov 25 '20 at 09:20

1

In file: styles.css

.cdk-overlay-container
{
    z-index: 9999 !important;
}

I tried all solutions in my internal css file of the component, and nothing works, only when moved it to styles.css.

good luck

answered Nov 25 '20 at 09:20

Adir Dayan

1,308
13
21

score 1 · Answer 9 · answered Feb 28 '21 at 07:19

1

<style>
.ui-front {
    z-index: 5000;
    position: relative;
}
</style>

answered Feb 28 '21 at 07:19

Sanoop

41
3

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Feb 28 '21 at 09:34

score 0 · Answer 10 · edited Jan 08 '16 at 23:11

0

Adding the appendTo option resolved this issue. It appended the menu to one of the objects in the bootstrap model.

edited Jan 08 '16 at 23:11

Nathaniel Ford

20,545
20
91
102

answered Jan 08 '16 at 22:44

Harish kakani

133
1
13

score 0 · Answer 11 · answered Sep 11 '17 at 16:42

I solved by this....

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

Autocomplete extender completion list has an utomated ID like this id='_completionListElem'

so you must push up the z-index .. upper then the bootstrap modal panel ;)

Hope it helps

score -1 · Answer 12 · edited Sep 28 '16 at 17:47

-1

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

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

edited Sep 28 '16 at 17:47

Kurt Van den Branden

11,995
10
76
85

answered Sep 28 '16 at 15:33

Jesus Ob Ac

1
1

Autocomplete issue into bootstrap modal

12 Answers12

In file: styles.css

Linked