CODEWITHSUNDEEP
jquerycssjquery-uipositionjquery-dialog
Matt Welander
Matt Welander

Reputation: 8548

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

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" );

Upvotes: 5

Views: 6326

Answers (4)

Luke
Luke

Reputation: 23680

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

Upvotes: 2

Pawan Kumar
Pawan Kumar

Reputation: 33

Change the jQuery UI version file that's in the user theme or plugin directory to new version of jQuery UI. If the problem is not resolved, then copy the same jQuery UI version's minified files to wp-includes/js/jquery/ui folder (copy all the files in the ui folder).

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146410

You seem to be using a custom build of jQuery UI. In the download builder, make sure you've included the recommended components, including:

  • Position
  • Draggable

Additionally:

  • Use your favourite HTML validator to make sure that your markup is correct
  • Make sure the JavaScript error is not caused by some other code

Upvotes: 0

Related Questions