custom css scope jQuery UI dialog themes

Question

I am using multiple jQuery UI dialog themes on a single page, and i have bug.

[jQuery 1.3.2] [jQuery UI 1.7.2]

any ideas?

Here screenshot (vs custom css scope) http://img237.imageshack.us/img237/6695/td3f.jpg

alone on the page 1)

vs native 2)

Answer 1

I hit the same problem today. It seems that any dialog you create is taken out of its current hierarchy and placed at the end of the body element, which means that it isn't covered by a custom css scope.

The "dialogClass" option is of no help as well, since it sets the class of the dialog element, but you need the dialog to be a descendant of an element with your custom class.

One way to make it work is to set the custom class on the body tag. That however means that the whole document is affected and you cannot use different themes on one page anymore.

The way I ended up with is a little workaround to put the dialog element back into an element with your custom scope. Presuming that there's a div with class "myCustomScope" that contains everything the custom theme should apply to; and the div with id "myDialogContent" that should become the dialog:

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // other dialog options
});
// Take whole dialog and put it back into the custom scope
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen)
d.dialog('open');

Answer 2

//Try this to fix problem
//note: jquery-ui-1.7.2

var dwrap = [false, false];
//0 - dialog1 flag(modal: true)
//1 - dialog2 flag(modal: false)

//?dialog1 = your dialog id
// example: mytest-dialog1
//?dialog2 = your dialog id
// example: mytest-dialog2

//?custom css scope = your custom css scope
// example: .my-dialog-themes

 function DialogTheme(dialog){
    switch (dialog){
     case 0 :
      if( !dwrap[0] ){ 
       $("div[aria-labelledby*='ui-dialog-title-?dialog1']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[0] = true; 
      }
      //for overlay no good way but i dont see another
     $(".ui-widget-overlay").wrap("<div class='?custom css scope'></div>"); 
     break; 
     case 1 : 
      if( !dwrap[1] ){
       $("div[aria-labelledby*='ui-dialog-title-?dialog2']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[1] = true; 
       }
     break; 
     default : 
     break; 
    }
 }

//Use:
//after open dialog call DialogTheme(0) for modal and DialogTheme(1) for none modal
//example:

 $("#?dialog1").dialog('open');
 DialogTheme(0);

//This way work correct on the page except overlay, 
//note you must have jquery-ui-1.7.2 other versions not tested
//It's all

Thankyou Andreas for your answer

Answer 3

There are other jQuery UI elements that get taken out of the normal HTML flow, in addition to the dialogs. The autocomplete widget, for example.

I've found that something along these lines seems to do the trick:

$(window).load(function() {
 $('.ui-autocomplete').wrap('<div class="css_scope_selector" />');
});

Although doing this on window.load may not be ideal.