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

Naca

Answer 1

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

Naca

Thank you. If anyone had my same issue, it applies also to jquery autocomplete combobox. Just add appendTo: ".your-form-in-modal" to .autocomplete({ in the _createAutocomplete function. – Sapphira

Thanks for the solution. However if you remove the textarea, We do see a scrollbar inside modal-body. Any idea how to fix this? Here is a working fiddle: jsfiddle.net/TtxqG/410 – Presidentelect

or simply add .ui-front to modal window – Newscast

teran : This is the quickest answer, thanks ! More accurate, add .ui-front to your .modal-body div. – Amaranthaceous

If indicating appendTo option does not resolve your issue, you can do appendTo: $(id or class).parent() – Joly

Nice. if you're using the same function for different cases this could be a general solution: appendTo: $(selector).closest('form') – Hadden

@teran: "simply add .ui-front to modal window" this is amazing ! thank you – Symer

Answer 2

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.

Paulpaula

If you read the comments of the other answer, which is exactly the same as yours, the problem is not solved in this way! – Naca

Worked for me. Regardless of the nay-sayer. – Martres

Perfect. No JS. With CSS, this is the best solution. – Hartebeest

Your solutions worded for me too. Thank you – Tharpe

Worked like a charm! – Cart

2147483647 is a bit overkill. Bootstrap modal nowadays is z-index: 1055; thus setting z-index to 2000 would be more than enough. – Fireeater

Answer 3

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.

Nonunion

Works great with Foundation 5 reveal-modal. – Prosit

Does not work for me. So far, the only thing which does work is hacking the z-index which feels wrong. – Abcoulomb

this should be the answer – Zulema

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.

Mistranslate

While the accepted answer will work, I feel like this should be the correct answer, as the docs indicate this as the default behavior: If an element with the ui-front class is found, the menu will be appended to that element – Tan

you repeat an already answer 2 years later. See original answer from @Fernando Pinheiro – Zulema

Answer 5

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;
}

Loment

The problem is not just that and not solve anything by putting a parameter z-index so high! The problem is not only the fact that it remains below the modal, but if you make it scroll the page the results do not remain attached to the input, and if you re-read the question well will be explained. However, the problem is resolved, see answer above! – Naca

Answer 6

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

Imbroglio

Answer 7

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

Chaudfroid

This is not responsive design – Parbuckle

I don't get you @Parbuckle – Chaudfroid

Answer 8

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

Afflictive

Answer 9

<style>
.ui-front {
    z-index: 5000;
    position: relative;
}
</style>

Munos

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Antecede

Answer 10

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

Furfural

Answer 11

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

Flotage

Answer 12

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

Laminated