jQueryUI autocomplete in Bootstrap modal displaying underneath modal

jQueryUI autocomplete in Bootstrap modal displaying underneath modal

I have a jQueryUI autocomplete in a Bootstrap modal window. When I run it normally in the page it works fine, but when I try add it into the modal the list appears behind the modal, not in front.
I’ve tried variations of the following with no luck:
$(“#myModal”).css(“z-index”, “1500”);
$(“tags’.$fieldname.'”).css(“z-index”, “5000”);

In the modal:
data-backdrop=”false”

Here is the source:

& nbsp;

RFQ

Solutions/Answers:

Solution 1:

Using Bootstrap 3.1.1 I found it sufficient just to add the following CSS to get the autocomplete to work.

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

The ui-autocomplete class is attached to the UL which is used internally to construct the autocomplete. By giving it a crazy high z-index you effectively ensure it will be laid out above everything else in the page including the modal dialog.

Solution 2:

jQuery autocomplete has a built in CSS class for this purpose. Just add ‘ui-front’ class to a container element in the Bootstrap modal.

jQuery Autocomplete docs

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

Solution 3:

Use appendTo option instead css modifications:
http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

Solution 4:

$("tags'.$fieldname.'").css("zIndex", 5000); 

Solution 5:

What worked for me:

<input type="text" id="country"  class="form-control" onclick="data()" />

and then in javascript:

        var countries = [
    { value: 'Andorra', data: 'AD' },
    { value: 'Zimbabwe', data: 'ZZ' }
    ]; 

     function data(){
    $('#country').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
   });

   }

Solution 6:

I had a similar issue. Try adding following:

Below Input field of tags, add a div with id="tags_container"
like this:

<input type="text" id="tagsps2"  required  AutoComplete="off" placeholder="Search..." class="inputMed inline form-control input-med"  />
<div id="container_tags">
</div>

Then add following css:

.ui-autocomplete {
    position: absolute;
}

#container_tags {
    display: block; 
    position:relative
}

This should fix your alignment issue.

References

Related:  Using CakePHP FormHelper with Bootstrap Forms