Jquery ui autocomplete not working with bootstrap
Jquery ui autocomplete not working with bootstrap : This occurs basically due to z-index conflict. It is fixed easily by increasing the z-index of the input field. Sometimes when you are working with jquery ui auto complete and bootstrap there may be z-index problem which hides the jquery ui autocomplete result. This issue can be fixed by adding the z-index to the ui result. Make sure the ui autocomplete has higher z-index than the others on the page.
Jquery ui autocomplete not working with bootstrap
Now lets Add the following css to fix the issue.
Add Z-index in ui-autocomplete css
.ui-autocomplete {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
cursor: default;
background-color: #fff;
padding:3px;
border: 1px solid #ccc
}
.ui-autocomplete > li.ui-state-focus {
background-color: #FF6C00;
}
|
In the above example we have added two css onefor z-index and second for adding background color. To fix the overlapping issue ad the z-index:1000*(maximum to keep on top as per my need) it can be higher or lesser in your case. So check your design and z-index of others.
Advertisements
