There's a problem using scoped themes with jQuery UI's Dialog widget in the 1.6 and 1.7 releases (and possibly 1.7.1 as well).
Christoph Herold mentioned his workaround - wrapping the dialog's DOM with a scoping div (with the scoped theme's class name). I wrote a small jQuery plugin that does this and works fine so far:
// Wraps the dialog in a div with the scoping class on
// dialog open, removes the scoping class on dialog close
$.fn.dialogScopingWorkaround = function(scopingClass) {
this.bind('dialogopen', function(event, ui) {
$(this).parents(".ui-dialog").wrap(
'<div class="dialogScopingWrapper '
+ scopingClass
+ '"></div>'
);
});
this.bind('dialogclose', function(event, ui) {
var wrapper = $(this).parents(".dialogScopingWrapper");
wrapper.replaceWith(wrapper.children());
});
return this;
};
Example with the "smoothness" theme scoped with class "theme-smoothness":
$('#dialog').dialogScopingWorkaround("theme-smoothness").dialog();
// Must call the workaround before opening the dialog
// so the 'dialogopen' event is bound.