Auto-complete issue in bootstrap modal

Question

I have a problem with jQuery auto-completion displaying inside a modal dialog bootstrap.

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

Is there any way to solve this problem?

Here's the 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 a problem:

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

If the modal has a scroll, the problem remains!

Here is JsFiddle / 1 .

Answer 1

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

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

Where he can bind the box to the results in any element, I have to stop his binding to the form class!

JsFiddle works here! .

Answer 2

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

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

Make sure you put it in front of the .js script responsible for handling the modal autocomplete logic.

Answer 3

Check the appendTo documentation :

When null, the parents of the input field will be checked for the ui-front class. If the element is of ui-front class, a menu will be added to this element.

So, just add the "ui-front" class to the parent element , and autocomplete will correctly display inside the modal file.

Answer 4

The actual problem is that Bootstrap Modal has a higher Z-index than any other element on the page. Thus, automatic completion actually works, but it is hidden behind the dialog.

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

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

Answer 5

With the addition of the "ui-front" class to the parent div, and autocomplete will correctly display inside PopUp For Me.

Answer 6

just try adding this:

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

Just make sure you attach great importance to the property and DO ADD

important!

This is really important. The latter will tell the browser to execute this rule first before any other class. Hope this helps.

Answer 7

To fix this, I just needed to modify the css file using jQuery:

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

Answer 8

Adding the appendTo option resolved this issue. He attached a menu to one of the objects in the bootstrap model.

Answer 9

I decided this ....

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

Autocomplete completion list autofill has utomated ID like this ID = '_ completionListElem'

so you have to click z-index .. top, then boot modal bar;)

Hope this helps

Answer 10

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