jquery UI position not positioning correctly

I am using the jQuery UI position function to center a dropdown box under its button. It is not positing correctly. Here's a fiddle.

$(".dropDown .dialogueBox").position({
    my:        "bottom center",
    at:        "top center",
    of:        $('.dropDown .drop-button'),
    collision: "flip"
});

$('.dropDown').on('click', '.drop-button', function() {
    if($(".dropDown .dialogueBox").is(':visible')){
        $('.dropDown .dialogueBox').fadeOut(300)
     } 
     else {
        $('.dropDown .dialogueBox').fadeIn(300);
    } 
});

I am using the latest jQuery and jQuery UI libraries from google's CDN.

Answers


You've just switched the horizontal and vertical positioning values.

$(".dropDown .dialogueBox").position({
    my:        "center top",
    at:        "center bottom",
    of:        $('.dropDown .drop-button'),
    collision: "flip"
});

This fiddle works: http://jsfiddle.net/hfCNP/39/


Need Your Help

deploy tools: get a list of actions the tool will execute without executing the deploy script

deployment msbuild nant

We're in the process of evaluating MSBuild and Nant for deploys. We may roll our own tool. One thing that a different business unit -- let's call it DeptA -- would really like to have (as in it be...