JQuery-UI Theme with defined css scope won't work

[thomich]

Hello

As in this bug http://bugs.jqueryui.com/ticket/9280 described, i found a issue in theme downloader/creator:

Checkout this two jsFiddle:

jQuery-UI, original darkness theme, without css scope: http://jsfiddle.net/thomi_ch/CUkLK/ works fine, as expected Theme original link: http://goo.gl/J8J3x

jQuery-UI, le-frog theme, with css scope ".rudy": http://jsfiddle.net/thomi_ch/vLvWQ/ dialog doesn't show exactly, some styles are not applied. Theme original link: http://goo.gl/CYqQO

Checkout also this two screenshots of the code:

without css scope: http://i.imgur.com/WLaSyos.png

with css scope: http://i.imgur.com/dmIoV24.png

I use two different themes for admin and customer gui. Before i used 1.8.4 which has worked perfectly in that case.

I don't know if this is only ui.dialog specific, maybe other components also have a problem with used css scope.

Thanks for feedback or a fix/workaround for it.

Regards
thomi

[rxaviers]

@scottgonzalez @jzaefferer,

Is this the right approach to scope dialog, or user should scope the parent element of a widget? (eg. body)

$("#dialog").dialog({
  dialogClass: 'rudy'
});

If it is, any suggestion?

[scottgonzalez]

That's the right way. If you scope body, you might as well not use a scope.

[thomich]

Is there any way, chance to create a workaround? We need to have two different JQuery-UI Themes in the same Webapp.

Thanks for Help
thomi

[scottgonzalez]

@thomich This just needs to be fixed in download builder. The scope needs to apply as a chained class as well.

[rxaviers]

A workaround depends on what you're building. Scott perhaps has some other suggestions. But, if you have two simultaneous themes, which one do you want for dialog? Perhaps you can make it the default (not scoped), and scope the other. If you need to switch theme, eg you have an admin page, or anything that requires you to dynamically switch themes. You can accomplish that by scoping body dynamically.

[scottgonzalez]

You can accomplish that by scoping body dynamically.

No you can't. You can never scope the body as a workaround. If you do, it's not a scope, since everything that wasn't scoped would suddenly become scoped.

[scottgonzalez]

There is no workaround for not chaining classes. The only "workaround" is to manually write the chained rules.

[rxaviers]

everything that wasn't scoped would suddenly become scoped = aka switch theme

[scottgonzalez]

Yes, and switching themes is not the same as scoping a theme to a widget. Every single widget on the page would suddenly change, while the desired effect is only applying the scoped theme to the dialog.

[thomich]

We won't switch themes, we need scoped widgets.. eg. on time on the same page customer opens any scoped witched and on the same page the admin open a admin widget w/o a scope... so not switch, use two themes on the same site, one scoped, other not...

We used 1.8.4 before we migrated to 1.10.3 and in 1.8.4 all was fine...

Check this example, only this example, again please:
http://jsfiddle.net/thomi_ch/vLvWQ/
Here only one theme is used, but with the scope called ".rudy" (fantasy name).
You will see that the dialog view is wrong, right?
So, one theme with css scope > wrong view...

I tried to wrap a div around .ui-dialog, but that breaks also other things, like the modal option and is not the solution.

@scottgonzalez you said: The only "workaround" is to manually write the chained rules.
Can you make a example for that?

@rxaviers we don't won't switch theme, see above example with only one theme with css scope...

I'm wondering why not others have same problem.. use multiple scoped widgets on same page is/was a nice feature for making customer happy ;)

Hey, thanks for any input, fix, workaround.

Regards
thomi

[scottgonzalez]

@thomich Just look at your old and new theme, compare the rules with your scope and you'll see where you need to make changes.

[thomich]

Hey @scottgonzalez
Thats not easy, cause changes from 1.8.4 to 1.10.3 are big..... tried it again but no luck... Maybe tomorrow i will try another way to compare... But thanks for that hint..

btw. my irc nick: noaXess

[thomich]

Hard work, but found anything...
Checkout now: http://jsfiddle.net/thomi_ch/vLvWQ/
Used with css scope ".rudy" .. I needed to attach an extra css, that adds some css rules, w/o css scope, to get the dialog working.. check this overwrite css rules:
http://webs.win-soft.ch/jquery-ui-1.10.3.custom/css/rudy/jquery-ui-1.10.3.custom.overwrite.css

One step forward.. ;)

thomi

[thomich]

Will there be any solution or do i really need above workaround for all our installations?

Don't know exactly where the problem is, but you do.. and you are able to solve.. right?

Will be nice if it is solved soon..

Thanks a LOT..
thomi