In the previous version of formVista we had a single jQuery UI installation with a theme roller created theme.
Then for each formVista theme we would override key parts of the themeroller theme. This has turned out to be a painful approach. So instead, I'm moving to a setup where we use themeroller to create a full jQuery theme for each formVista theme. It should end up being more maintainable. Time will tell.
As part of this effort and to avoid some unfortunate interactions between jQuery.UI styles and styles from other components, which in formVista are all dynamically loaded, I decided to try applying a CSS scope (i.e. prefix) to the themeroller generated theme.
This works fairly well except in the case of dialogs and other popup tags that are direct descendants of the <body> tag. In order to apply the CSS Scope to the dialog, you have to wrap the dialog in a div containing your scope. As mentioned in this blog article over the filament group, you can use:
$(.selector).dialog().parents(.ui-dialog:eq(0)).wrap(<div class="myScope"></div>);
to wrap the dialog.
The one problem with this approach is that if you happen to be creating a modal dialog, a separate div implementing the modal behavior is created /outside/ of the wrapping div which means it does not get the CSS scope style.
I'm still working on a solution to this issue.
My understanding is that jQuery will have a "helperClass" attribute at some point in the future to address this issue. Until then, I'll have to implement some hack or continue on just using a global style.
Update 2009-09-10
I've decided to fall back and punt on the CSS Scope issue for now.
