AEM 6.5 : Touch UI : Custom components missing edit bar

[aem1234567]

All - We are having an issue in AEM 6.5 where when a custom component is added on a page, edit option goes missing, we have to use left side panel to find the component for making any edits. I realized this could be because of css of the component as this issue is happening for few components and not all of them. As we are migrating website from a different CMS to AEM without any redesign effort, we need to reuse CSS as is. Is there a way we can make minor change to have edit option available for components? See screenshot for more details. If you notice placeholder bar (to add more components) is also appearing before the component instead of appearing below it.

[Sady_Rifat]

Hello @aem1234567 ,
Since you realized this is a CSS issue, you can do one thing load CSS file differently. One set of for the author and other set for publish.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly
            data-sly-test="${wcmmode.preview || wcmmode.edit}"
            data-sly-call="${clientlib.css @ categories='my-project.author.header'}"
    />
    <sly
            data-sly-test="${!wcmmode.preview && !wcmmode.edit}"
            data-sly-call="${clientlib.css @ categories='my-project.publish.header'}"
    />
</sly>

Embed all the component clientlib differently:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[my-project.author.header]"
    embed="[component-one-clientlib,component-two-clientlib]"
    jsProcessor="[min:gcc]"/>

[aem1234567]

Thank you for your suggestion. I am not sure which css is causing this behavior, Are there any css styles which can cause this behavior which i can look for in the css file and then overwrite those styles in author.css file? I do not want to remove complete component css file as it will not be correct experience for authors while authoring content.

[Sady_Rifat]

Actually, it's very difficult without investigating the issue. I thought you already identified it.

Still, you can follow some steps to find out the problem's root cause:

1. Use a new page template that is directly inherited from page v3.
2. Create new template types and template
3. Add the custom components

If it's ok then the problem is with your template

Again,

1. Allow your components on the we-retail site.
2. Check your components are behavior correctly, for now, add the clientlib with component HTML

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
     categories=['my-project.component.mycustomcomponent.category'], defer=true}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>​

After this, I hope you will find out the actual root cause of your problem.