jquery ui autocomplete positioning wrong

Question

using jquery ui 1.8 trying autocomplete

Everything works apart from that the ui-menu isn\'t positioned under my input element, but rather in the top left corner.

Answer 1

Simply updating to the latest JQueryUI did the trick for me. I started having this issue after I switched to Twitter Bootstrap (and the latest JQuery I think too).

Answer 2

Another similar issue, if you're using a CDN to serve your jquery files, make sure you use a specific version, i.e.:

//ajax.googleapis.com/ajax/libs/jquery/1.7.2/

Rather than the 'latest' version:

//ajax.googleapis.com/ajax/libs/jquery/1/

This will take away the possibility of conflicts in future releases of jquery, which can often break an app when the 'latest' version on jquery is updated on the CDN.

Answer 3

put

position: relative;

inside of

#searchFormWrapper

Answer 4

I know this is an old post, but just had this issue myself and fixed it another way.

I had updated jQuery, which caused the menu to appear at left:0; top:0; on the window, rather than nicely below my input.

Updating jQuery UI fixed it instantly. Hope this is of use to someone.

Answer 5

Woohoo. Found the culprit:

<script type="text/javascript" src="/scripts/jquery/132/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/132/jquery-ui-1.8.custom.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.dimensions.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.tooltip.js"></script>

Don't include jquery.dimensions.js. I assume it's already in jquery-ui.js ... anyway, it fixed my problem.

For latest jqueryUI you now need to include jquery.ui.position.js

Answer 6

Update Jquery UI and jQuery scripts in your project, it will resolve any conflict and issue will get fix.