"CSS Scope" definistion not work with dialogClass

[mostowfim]

When defining a CSS Scope in "Advanced Theme Settings", the "dialogClass" option for Jquery dialog not work properly.

The workaround is to edit the css and remove ".ui-dialog" from the file. it is because the .ui-dialog and dialogClass is in the same level in the generated markup for dialog.

[Scott González]

This doesn't make any sense. The dialogClass is the scope.

[mostowfim]

check below links:

​http://178.162.154.203/jqueryui/modal-without-css-scope.html

​http://178.162.154.203/jqueryui/modal-with-css-scope.html

[Scott González]

ThemeRoller's scoping option and dialog's dialogClass option solve the same problem, but in different ways. There's not really a good way for us to handle this.

[mostowfim]

it is impossible to define "css scope" in ThemeRoller for applying to "dialog" because the dialog code is generate at the end of the page and there is no surrounding DIV for assigning the class.

the ugly workaround is to use below code: $('.ui-dialog').wrap('<div class="cssscope" />');

[Scott González]

That's a fairly bad workaround, unless you're writing code to dynamically create and destroy the element on open and close. It also doesn't address scoping the overlay.

[Scott González]

#8366 is a duplicate of this ticket.

[frediani.adrien]

Why can't we fix this? A simple solution would be to add a 'scope' option to the widget. Then we can just wrap the dialog dom node with '<div class="${option.scope}">' after it has been appended to the end of document.body. I tested locally and works fine.

line 127 of jquery.ui.dialog.js:

++ .wrap('<div class="custom_scope">'),

[Scott González]

Adding yet another wrapper is a potentially breaking change.

[frediani.adrien]

Replying to scott.gonzalez:

Adding yet another wrapper is a potentially breaking change.

Ok,any idea on what this could possibly break? Just for my information...

Only thing I can see now would be cleaning this wrapped div on destroy.

[Scott González]

It would break any script that expects specific elements to be children of .dialog( "widget" ).