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.

Has anyone come across this problem?

Here's my html:

<div id="search">
    <div id="searchFormWrapper">
        <form method="post" name="searchForm" id="searchForm" action="/searchresults">
        <label for="searchPhrase" id="searchFor">
            Search for</label>
        <input name="searchPhrase" id="searchPhrase" type="text" />
        <label for="searchScope" id="searchIn">
            in</label>
        <select name="searchScope" id="searchScope">
            <option value="">All Shops</option>
            ...
        </select>
        <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif"
            alt="Search ..." />
        </form>
        <br class="clear" />
    </div>
</div>

and here's my css:

#search
{
 width:100%;
 margin:0;
 padding:0;
 text-align:center;
 height:36px;
 line-height:36px;
 background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left;
 overflow:hidden;
 font-size:12px;
}
#searchFormWrapper
{
 width:520px;
 height:36px;
 overflow:hidden;
 margin:auto;
 padding:0;
}
label#searchFor
{
 display:block;
 float:left;
 width:80px;
 padding:0 5px 0 0;
 margin:0 0 0 0;
 text-align:right;
}
label#searchIn
{
 display:block;
 float:left;
 width:20px;
 padding:0 5px 0 0;
 margin:0 0 0 0;
 text-align:right;
}
#searchPhrase
{
 display:block;
 float:left;
 width:120px;
 margin:7px 0 0 0;
 padding:0;
}
#searchScope
{
 display:block;
 float:left;
 width:120px;
 margin:7px 0 0 0;
 padding:0;
}
#submitSearch
{
 display:block;
 float:left;
 margin:7px 0 0 10px;
 padding:0;
}

and here's my javascript:

$(document).ready(function()
{
    $("#searchPhrase").autocomplete(
    {
        source: "/search?json",
        minLength: 2
    });
});

Answer 1

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 2

I simply changed my jquery-ui.min.js to the latest version and it fixed the positioning.

from 1.8.16 to 1.8.23 and it worked!

Answer 3

I had a similar issue, and after searching I found out I was missing a JS to fix this. In case someone stops by ensure to have a the "jquery.ui.position.js" script called as well.

See http://jqueryui.com/demos/autocomplete/ under dependencies: UI Core UI Widget UI Position

Answer 4

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 5

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 6

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

Answer 7

put

position: relative;

inside of

#searchFormWrapper