jQueryUi dialog stuck in top left corner (and not movable)

Question

So I have a simple jQueryUi dialog that won't center, and it can't be moved either.

The error message I get in my console refers to

jquery-ui-1.8.17.custom.min.js:36

so that doesn't tell me much, just that some parameter passed to some jQueryfunction was invalid:

Uncaught TypeError: Object function (a,b){return new p.fn.init(a,b,c)} has no method 'curCSS' jquery-ui-1.8.17.custom.min.js:36
a.fn.position jquery-ui-1.8.17.custom.min.js:36
p.extend.each jquery-1.8.2.min.js:2
p.fn.p.each jquery-1.8.2.min.js:2
a.fn.position jquery-ui-1.8.17.custom.min.js:36
a.widget._position jquery-ui-1.8.17.custom.min.js:156
a.widget.open jquery-ui-1.8.17.custom.min.js:156
(anonymous function) jquery-ui-1.8.17.custom.min.js:17
p.extend.each jquery-1.8.2.min.js:2
p.fn.p.each jquery-1.8.2.min.js:2
a.widget.bridge.a.fn.(anonymous function) jquery-ui-1.8.17.custom.min.js:17
openMediaLibrary 6:456
onclick 6:187

The dialog div looks like this:

<div id="mediaLibrary" title="Bildgalleri">
     <iframe width="950px" height="500px" src="{{ path('ImageGallery') }}" style="border:0;" /></iframe>
</div>

Dialog initialized here...

$( "#mediaLibrary" ).dialog({
    height: 550,
    width:980,
    modal: true,
    autoOpen: false,
    position: { my: "center", at: "center" },
});

...and opened here

$( "#mediaLibrary" ).dialog( "open" );

Answer 1

I found this to be a problem with the version of jQuery and jQuery UI that I was using together.

I found that this combination of versions stopped the dialog from 'sticking' to the top left hand corner:

• jQuery 1.8.2
• jQuery UI 1.10.1

Answer 2

You aren't using all the params for position. The default of a dialog is centered in page anyway so removing the position option will clear your problem.

Also note syntax error..trailing comma in options object. This will break in IE