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?

Here JsFiddle:

.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.

Answer 1

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!.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

.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>