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.

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

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

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

Solution 4

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

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

View more solutions

Comments

[Lughino]

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!

[Lughino]

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

[KingOfHypocrites]

Worked for me. Regardless of the nay-sayer.

[Dean Richardson]

Works great with Foundation 5 reveal-modal.

[z3d0]

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.

[Sagar Gala]

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

[gtzinos]

This is not responsive design

[Ange Kouakou]

I don't get you @gtzinos

[cman77]

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

[teran]

or simply add .ui-front to modal window

[tomsihap]

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

[Koushik Das]

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

[Jose Jet]

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

[CXJ]

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

[Sakhawat Hossain]

Your solutions worded for me too. Thank you

[fustaki]

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

[Mario Orlandi]

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

[YSFKBDY]

Worked like a charm!

[Leandro Bardelli]

this should be the answer

[Leandro Bardelli]

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

[Mark Rotteveel]

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.