Component is not showing in page but showing in content tree

[Nandheswara]

Hi all

I am using AEM 6.4 and currently doing Classic ui to touch ui dialog migration

My Component is not showing in touch ui page once i drop my component in page means its showing in content tree only all the component functionality is working fine but only one thing is if we need to author the dialog means we go to content tree and select the component and after that only we can edit so i need to select my component in page itself and author it

Can you suggest some idea to fix it

 

 

[SwetaB]

Hi @Nandheswara ,

This might happen if you do not have an empty placeholder for the component when its not configured.

This is required in Touch Ui dialog.

You can add this in the first line 

<div data-sly-test="${!properties.title && wcmmode.edit}" class="cq-placeholder" data-emptytext="Component name"></div>

Thanks,

Sweta

[Nandheswara]

After adding the Placeholder, the component is overlaying with parsys like this 

can you suggest some idea to fix it

 

[SwetaB]

There seems to be some issue with the rendering condition. I can see the placeholder and the title 'hello' both displaying. 

Ideally when the title is configured as per the condition then the placeholder should not display and vice versa.

[arunpatidar]

Hi @Nandheswara 

This could be because of no placeholder for empty component or there is a problem with backend(jsp) logic.

If you can see the component is rending in view as publish mode then logic seems ok but only plcaeholder is missing.

[Nandheswara]

Component is working fine in published mode and also after adding the Placeholder to that component, the component is overlaying with parsys like this 

 can you suggest some ideas to resolve this

[arunpatidar · Accepted solution]

Then it is a css issue.Please check with front end team then can help
In Author mode there are extra divs and classed added and that might be overriding with your project css.

make sure you have all the tags properly closed as well.

[poojac35931336]

You can add some empty text in your component's jsp to have it some height when dropped

<p data-emptytext="Author here" class="cq-placeholder"></p>