How to make parsys containers available in content fragment component embedded using data-sly-resource

[mpalme1]

I have a component with htl that wraps a couple of components including a content fragment component like this:

<sly data-sly-resource="${'./contentfragment' @ resourceType='mysite/components/content/contentfragment'}"/>

And that works except that, in the page editor, the "in between" parsys containers of that resourced content fragment component are visible but components can't be added from the component drawer. If I drag them onto the page over the parsys, they don't drop.

dragging an image component into parsys but it is disabled

Is there a way to make it so they can be?

[Jörg_Hoh · Accepted solution]

Are you using core components? In that case I would ask on the Core Components github page.

[mpalme1]

Thanks, @Jörg_Hoh. I believe this is a core component based on this https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/content-f... and this https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/.... I'll try the github page.

[mpalme1]

Posted here: https://github.com/adobe/aem-core-wcm-components/issues/1082#issue-647344056

[arunpatidar]

I don't think so you can author content fragment's content in the page editor. You can configure and browse content fragment which is created using content fragment model. Are you not able to configure content fragment when you include from HTL or the page parsys is become inedible because of CF?

[mpalme1]

Well, I am authoring the content fragment in my assets library using the content fragment model as you said. In this case, I am trying to use the Content Fragment Component (this one: https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/content-f...) to render the content of the Content Fragment. That component will include those "in between" parsys drop zones as described here: https://docs.adobe.com/content/help/en/experience-manager-64/developing/components/components-conten.... What I am trying to do works if the content fragment component is added to the page manually or via a workflow. However, if I add it using the data-sly-resource syntax above, the included "in-between" drop zones are visible but disabled.

[arunpatidar]

Thanks for the clarification. I tried same with core component in AEM 6.4 and I can see the in-between dropzones are enabled.

<sly data-sly-resource="${'./contentfragment' @ resourceType='AEM64App/components/content/contentfragment'}"/>

[mpalme1]

Interesting. Thanks, @arunpatidar. So, there must be something going on with my implementation that is causing the functionality to break. I'm not sure how to troubleshoot, though.

[arunpatidar]

@mpalme1 do you see any errors in browser console or in error.log? Let me know if I can help with debugging.

[mpalme1]

So, another developer and I were looking at this and figured out that our issue comes from the components overlapping each other in the editor. To test that out, we used style tags and float left and right to get them not to overlap. Once we did that, the drop zone became available. But it broke our design layout. So, now we're trying to figure out how to preserve the layout but still make the components adjacent instead of overlapping.

[mpalme1]

Turns out this css in core.css is what causes the overlapping:

.cq-Overlay > .cq-Overlay > .cq-Overlay {
    z-index: 174; 
}

 I'm not sure how to correct for that, though.

[kautuk_sahni]

@mpalme1 Any update on this thread?

[mpalme1]

@kautuk_sahni, i still have not found a solution