Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

CQ ExtJS Styles Not Applying

Avatar

Level 4

I'm attempting to add ExtJS controls to some of our authoring pages, but running into trouble when it comes to the default CQ CSS styles for the ExtJS components. If i simply create a new ExtJS component and render it to the body, everything looks fine because it is added to a div with an id of "CQ". However if i render it to a specific div in my template, the styles won't be applied because they only apply to elements under the "CQ" div. For example -

With JS:

new CQ.form.RichText({ width: 400, bodyPadding: 10, renderTo: 'editor' });

Which generates this HTML:

<body> <div id="editor"> <div id="ext-comp-1234" class="x-panel"> ... </div> </div> <div id="CQ"> <!-- Autogenerated components or "renderTo: CQ.Ext.getBody()" --> </div> </body>

The "ext-comp-1234" component won't have the "x-panel" class applied because it is defined -

#CQ .x-panel { ... }

The only way i've found around this issue is to hardcode a "CQ" div around my entire template, but this doesn't seem like a good idea as i don't know the original purpose of that div. Is there a better way to accomplish this?

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 10

AlertAlert24 wrote...

Thanks Sham,

I'm not looking to get rid of that "CQ" div, but wondering if it will cause problems if i manually hardcode that div into my template. The problem i'm having is that ExtJS components rendered to anything other than that div don't get the correct styles applied.

 

You do not have to hardcode, If so please file a daycare.  You should be able to apply own css.

View solution in original post

4 Replies

Avatar

Level 10

It's not recommended to switch off this div as it's used for several functions of the cq system, for example for the designer etc. This div should not be a problem normally.

If you have to switch off this div you can enforce the same component context for this included component and for your use of css you can definetely include it which is covered in out training. More details read http://helpx.adobe.com/experience-manager/kb/ComponentDiv.html

Avatar

Level 4

Thanks Sham,

I'm not looking to get rid of that "CQ" div, but wondering if it will cause problems if i manually hardcode that div into my template. The problem i'm having is that ExtJS components rendered to anything other than that div don't get the correct styles applied.

Avatar

Correct answer by
Level 10

AlertAlert24 wrote...

Thanks Sham,

I'm not looking to get rid of that "CQ" div, but wondering if it will cause problems if i manually hardcode that div into my template. The problem i'm having is that ExtJS components rendered to anything other than that div don't get the correct styles applied.

 

You do not have to hardcode, If so please file a daycare.  You should be able to apply own css.

Avatar

Level 4

For anyone else experiencing the same issue, we ended up taking the existing css files in /libs/ui/widgets/themes/default/widgets(/form/RichText.css), duplicating them into a new clientlib, and stripping out the #CQ rule. So this -

... #CQ .cq-rte-linkdialog { padding-top: 4px; padding-left: 4px; padding-right: 4px; padding-bottom: 4px; background-color: #FFFFFF; } ...

became -

... .cq-rte-linkdialog { padding-top: 4px; padding-left: 4px; padding-right: 4px; padding-bottom: 4px; background-color: #FFFFFF; } ...

So far we haven't noticed any adverse effects.