Granite jQuery UI interferes with site jQuery UI (dialogs etc)

[Former Community Member]

Hi,

we are using jQuery UI with custom extensions in our sites to create, for example, dialogs using jQuery UI dialog. In the author environment, we are facing issues because CQ also adds imports of jQuery UI (JS and CSS). In the page source there is a JS script block where GraniteClientLibraryManager.write is called, importing for example /etc/clientlibs/granite/jquery-ui.js and /etc/clientlibs/granite/jquery-ui.css.

Where is jquery UI (dialogs etc) used by the authoring environment?

Is there a proposed best approach to be able to use jQuery UI in a site without clashes with the authoring environment?

Would it be possible to enclose the CQ/Granite dialogs in an own UI widget CSS class name to separate it from our site specific UI? One solution we have thought of is to reset the jQuery UI styles using our own overriding CSS, but this does not seem like a suitable solution since it would require more CSS to load and simply unnecessary work.

Any input on this would be much appreciated

Thanks,

Joakim

[davidc61760217]

You need to either "scope" your own jQuery UI CSS, or scope the CQ version.

If you choose to scope the CQ version, you need to change "\etc\clientlibs\granite\jquery-ui\css\jquery-ui.css" file.  Add the scope of ".cq5jqui" to all the classes.

If you continue to have problems, please log a Daycare ticket.

[Former Community Member]

Thanks for your reply,

we will try that kind of solution out. Is ".cq5jqui" a class that is added by whichever CQ component that uses the jQuery UI dialog plugin? We are not sure where this is used or how we can see theses CQ dialogs in action.

[Ove_Lindström · Accepted solution]

dcollie wrote...

You need to either "scope" your own jQuery UI CSS, or scope the CQ version.

If you choose to scope the CQ version, you need to change "\etc\clientlibs\granite\jquery-ui\css\jquery-ui.css" file.  Add the scope of ".cq5jqui" to all the classes.

If you continue to have problems, please log a Daycare ticket.

Wouldn't it then also be necessary to add that css scope to all the places where AEM is using jquery-ui dialogs? IMHO, that is a bit to intrusive on the author system and I think that the best practice would be if AEM scoped its use of the jquery-ui widgets for its own use and not "force" it into the global scope. Or is the .cq5jqui already defined in all places where it is used? Then... why not scope the mentioned file from start? ;)

As it is today, anyone that wants to use jquery-ui in theirs AEM-based web applications needs to override the full jquery-ui css and it is not possible to have partial css definition.

Will probably file a ticket to Daycare as a development suggestion.