Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

mpalme1
Level 3
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
Jörg_Hoh
Correct answer by
Employee
Employee

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

View solution in original post

12 Replies
Jörg_Hoh
Correct answer by
Employee
Employee

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

View solution in original post

Arun_Patidar
Community Advisor
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?

 

mpalme1
Level 3
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.
Arun_Patidar
Community Advisor
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

mpalme1
Level 3
Level 3
Interesting. Thanks, @Arun_Patidar. 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.
Arun_Patidar
Community Advisor
Community Advisor
@mpalme1 do you see any errors in browser console or in error.log? Let me know if I can help with debugging.
mpalme1
Level 3
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.
mpalme1
Level 3
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.