I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
sling:resourceSuperType property to wcm/foundation/components/page. As shown in the screenshots above, I have only one page component that have the html head and body. I am not using any other client library that may block the script. Not sure, what is the reason. –
Cinchonine Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' @resourceType='foundation/components/parsys'}" />
</body>
responsegrid component. –
Drink I think @l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?
I had the same issue. Turns out that my css was somehow causing this. Try blocking your template css (or js) in network and see if that fixes things.
© 2022 - 2024 — McMap. All rights reserved.
<div data-sly-resource="${ 'par' @ resourceType='wcm/foundation/components/parsys'}"></div>. See if this does work? This would be the "newer" version of the parsys which should support TouchUI better. – Starstarboard@path='par'part? I am just curious because I never saw it like that. The official documentation also does not show it like this. See here and here. – Starstarboard<div data-sly-resource="${ @path='par' resourceType='wcm/foundation/components/parsys'}"></div>AND<div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>. They both have same result. – Cinchonine