Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

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

Avatar

Level 3

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 disableddragging an image component into parsys but it is disabled

 

 

 

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

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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

View solution in original post

12 Replies

Avatar

Correct answer by
Employee Advisor

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

Avatar

Community Advisor

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?

 



Arun Patidar

Avatar

Level 3
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.

Avatar

Community Advisor

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'}"/>

 

cf.gif



Arun Patidar

Avatar

Level 3
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.

Avatar

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


Arun Patidar

Avatar

Level 3
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.

Avatar

Level 3

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.

Avatar

Administrator
@mpalme1 Any update on this thread?


Kautuk Sahni