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

[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>

[Sham_HC · Accepted solution]

Refer cheatsheet at http://aemfaq.blogspot.com/2014/08/touch-ui-authoring-cheatsheet.html

[Former Community Member]

Cool, thanks. I'll look into that.

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

[Sham_HC]

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...