Dialog not obeying my position

Question

For some reason, JQuery dialog refuses to start at the starting point when the height is bigger than the container (or page). Anyhow, I have set up a JS Fiddle.

The main issue is that my dialog with 1000px height doesn't start at the top left of the anchor as specified:

$("#dia2").dialog({
    autoOpen: false,
    modal : true,
    height: 1000,
    width: 300,
    resizable:false,
    draggable:false
});

$("#opendia2").bind('click', function(){
    $("#dia2").dialog( "option", "position", { my: "left top", at: "left top", of: $("#anchor") } );
    $("#dia2").dialog('open');
});

Instead, it starts at the top of the page but does obey the left since it is not too wide for the window.

The question: Is there any way to force JQuery UI to not try to prevent scrolling and just follow the given parameters?

Answer 1

according to the positioning docs, the default behavior for when a jquery element overflows the window in some direction is to flip it so to maximize the visibility of the element. This is what's causing your problems. You can turn off the default by setting collision: "none".

Check it out here