Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

AEM 6.3 - using parsys in htl files


Level 4

[Thread Edited By Adobe]

/*Don’t forget to meet and greet your fellow peers virtually by telling them about yourself here

Go ahead and to it now: https://adobe.ly/3eDnB4v */


Actual Post:

Hi All,


I am working with a HTL template and wanted to add some parsys components so we can make changes from the front end interface. Adding images, specifically.


My question is in regards to parsys resources. I have these tags in my html.

   <div class="logo" style="height:100px;">

           <sly data-sly-resource="${ @ resourceType='wcm/foundation/components/parsys'}"></sly>



The problem is that from the front end editor these show as very tiny lines, and its impossible to click them. And if I click them and add an image to them, I have to refresh my browser because the changes aren't reflected in my current session. I don't see any errors in the console log.




Is there something I need to do to make these bigger? Viewing the source shows them having a class as container is-disabled. Could that be my issue? I can add a new component to the ones I can click, but clicking them is the hard part. If you also have any ideas for why I may have to refresh the browser for any changes to show up. (I.E, I add a new image but the option to configure it does not show up until I refresh the page)



<div data-type="Editable" data-path="/content/vhhomecare/Home/jcr:content/left-par" tabindex="0" draggable="false" class="cq-Overlay cq-Overlay--component cq-Overlay--container is-disabled" title="Paragraph System - HTL [Root]" style="top: 224px; left: 8px; width: 1887px; height: 37px;"><span title="Paragraph System - HTL [Root]" class="cq-Overlay--component-name">Paragraph System - HTL [Root]</span><div data-type="Editable" data-path="/content/vhhomecare/Home/jcr:content/left-par/*" tabindex="0" draggable="false" data-text="Drag components here" title="Paragraph System - HTL [Root]" class="cq-Overlay cq-Overlay--component cq-droptarget cq-Overlay--placeholder is-selected is-active" style="top: 0px; left: 0px; width: 1887px; height: 0px;"></div>




Let me know what you guys think or if I'm even doing this the right way, thanks for your help.






1 Accepted Solution


Correct answer by
Level 4

Hi Zeeshank,

Thanks for your responses, I was able to figure out my problem! I needed to add an image as one of the allowed components in the design tab before I could click them in the edit tab. It had no allowed components so it wasn't clickable.

They are still very small and every time I add a component to a parsys, I need to refresh the browser to get it to update. Any ideas why this would be happening?

Not the worst, but at least I can add things again!



View solution in original post

25 Replies


Level 1


Please delete homepage.jsp and it will work.




Level 3

Any reason why we are seeing this issue suddenly


Level 7

Hello Facing the same issue ..even if i got the full height parsys . it is not clickable .if it is not clickable in desgin mode how i can allow component for this page ?


Level 7


can you help me out ?


I got this but I am not able to click that parsys so that i can configure any component .


Level 1

Hi, add this to your page component.

<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>