Autocomplete issue into bootstrap modal

Question

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

Answer 1

Adding the appendTo option resolved this issue. It appended the menu to one of the objects in the bootstrap model.

Answer 2

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

Answer 3

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

Answer 4

With add the class "ui-front" to the div parent element and the autocomplete will be correctly displayed inside the PopUp For Me.

Answer 5

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.