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.


User Ans/Comments

📖 Read More


Advertisements