Multiple Parsys on a page

Question

We have a page in aem 6.3 that has multiple parsys and iparsys in it. They are overlapping each other and when we drop a component in one of the parsys, it hides behind the parsys it was dropped on. What are the best practices to follow while having multiple parsys? PS: we had this design earlier when we were on AEM 6.0. it was fine in classic UI but touch UI had this same problem. Now we are migrating to AEM 6.3 and refactored the code to be in sightly with AEM 6.3. What can be the issue here? We just have a sample page with few parsys and no custom css applied. Are we missing some clientlib here? Thanks

Have you tried checking the styles of overlapping parsys and see if some CSS is changing the relative position, wrap or z-ordering. Adding some screenshot will also help. — dtr-java

Alexander Berndt Alexander Berndt · Accepted Answer · 2017-07-03T08:46:37

I just have a guess in the blue, but in AEM 6.2 we experienced similar issues, if our compononents didn't had an outer div. It was sufficent just to add a div for the non-publish mode.

<div data-sly-test="${!wcmmode.disabled}">
   <ul ...>
      <li>....
   </ul>
</div>

If this doesn't help, try to play with the cq:editConfig settings. Set the afteredit listener to REFRESH_PARENT.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:mixinTypes="[]"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PARENT"/>
</jcr:root>

Other listeners are aftercreate, afterdelete, afterinsert, aftermove and afterremove

Multiple Parsys on a page

1 Answers