Adobe Experience Manager Sites & More

jocamp · 10/15/15

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

Sham_HC · 10/15/15

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

Sham_HC · 10/15/15

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

jocamp · 10/15/15

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.

Sham_HC · 10/15/15

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.

jocamp · 10/15/15

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.

Adobe Experience Manager Sites & More

CQ ExtJS Styles Not Applying

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe