Autocomplete issue into bootstrap modal
JqueryTwitter BootstrapJquery Ui-AutocompleteBootstrap ModalJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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!.
Solution 2 - Jquery
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.
Solution 3 - Jquery
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.
Solution 4 - Jquery
With add the class "ui-front" to the div parent element and the autocomplete will be correctly displayed inside the PopUp For Me.
Solution 5 - Jquery
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;
}
Solution 6 - Jquery
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
Solution 7 - Jquery
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
Solution 8 - Jquery
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
Solution 9 - Jquery
Adding the appendTo
option resolved this issue. It appended the menu to one of the objects in the bootstrap model.
Solution 10 - Jquery
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
Solution 11 - Jquery
<style>
.ui-front {
z-index: 5000;
position: relative;
}
</style>
Solution 12 - Jquery
.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>