Expand my Community achievements bar.

SOLVED

How do the "cq-Overlay"-divs work in AEM6?

Avatar

Former Community Member

I'm trying to understand more about how the "cq-Overlay"-divs work, so when I have a component and hover over or click it in edit mode I see a blue border. How does the overlay determine what dimensions it has?

For my particular case, I have the problem that the edit overlay is way larger than the actual component, so where ever I click on the page it enables this component. There's no HTML errors, all divs are properly closed and when I inspect the element with Chrome Dev Tools it has just the right size...

 

// Edit: to narrow it down further, it seems this only happens when the component is included directly in the page template as a resource [1]. Not to go off-topic too much, but I also have another issue with this: The dialog does not open (error 400) since the resource does not exist on the current page. That makes sense as the node with properties 'topbanner' has never been saved. What's a better approach for including components on every page so that the dialog still works even if they have never been configured on that particular page? 

 

[1] <output data-sly-resource="${'topbanner' @ resourceType='abc/components/modular/topbanner'}" data-sly-unwrap></output>

1 Accepted Solution

Avatar

Correct answer by
Level 10
3 Replies

Avatar

Correct answer by
Level 10

Avatar

Former Community Member

Cool, thanks. I'll look into that.

Any comment about my question regarding the dialog not showing up?

Avatar

Level 10

paro22 wrote...

 

Any comment about my question regarding the dialog not showing up?

 

Not sure i understand your additional question correctly since you said it is offtopic.  use cq:include in your template so that component is included on all page. For setting default value in component use cq:template  http://experiencedelivers.adobe.com/cemblog/en/experiencedelivers/2012/06/defaults-in-your-component...