Editable Template - Unlocked Container Creating All Allowed Components

[Corrinne]

Hello all,
New to AEM and even newer to Editable Templates here. We are trying to implement editable templates in our site, previously based solely on static templates.
The goal is to create a template-type that includes our header and footer and an unlocked layout container for authoring. The header and footer are currently controlled by a global config, and are not draggable components. Rather, they are included via the body.html of the static page template being used.

Here is an example of how they would be included in an editable template:

<!--/*  Begin - Container for content */-->
<div>
	<!--/* Begin top Header */-->
	    <sly data-sly-include="partials/header.html" data-sly-unwrap />
	<!--/* End of Header */-->
	<!--/* Begin Body Content */-->
		<sly data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer"
			data-sly-repeat="${templatedContainer.structureResources}"
			data-sly-resource="${item.path @ resourceType=item.resourceType, decorationTagName='div'}"/>
	<!--/* Begin Body Content */-->
	<!--/* Begin Global Footer */-->
		<div class="global-footer">
			<sly data-sly-include="partials/footer.html" data-sly-unwrap />
		</div>
	<!--/* End Global Footer */-->
</div>
<!--/* End - Container for content */-->

Ideally, we want to include the header and footer in this way within the editable template. The issue is, when the necessary clientlibs are included (at the very least, clientlib-base is needed), the unlocked layout container begins to behave in undesired ways.

Firstly, the layout container nested within the root container loses quite a bit of its width. This is not ideal for the editable template. Expected is that components within the root container will be the same width as the root container.

For example:

The second issue we're facing is that an unlocked container with allowed components will create those components, rather than listing them in the familiar "Allowed Components" UI. For example:

I am having difficulty pinpointing what may be causing this behavior. I have been digging through our clientlibs trying to determine what there could be the source of the above issues. If you have an inkling of what may be going on, suggestions would be greatly appreciated! I will attempt to provide additional information if needed.

[Pawan-Gupta]

Hello,

here are my suggestion.

for first issue: it should be making layout container as small width, probably try to see if somehow the width has been adjusted for layout container via switching into layout container mode (similar like edit or preview mode) and find out.

for second issue: some time while working between structure and initial views of editable template and making things locked and unlocked you don't really realized that you messed it up there. now best way to deal is to delete all those configuration both initial and structure mainly policy/allowed components and start from there 

otherwise both problem become complex then suggest to start from scratch and think this was learning for you.

Thanks!!

[Corrinne]

Hello, and thank you for your reply!

I did enter layout mode, however both containers are taking the full 12 columns in the grid system. So, it appears the layout has not been manipulated in this way.

In terms of the second issue, the image above was taken off of a fresh template in structure mode. Nothing has been added to the initial content. The only policy in place is the "Default Layout Container" that comes with my local instance of AEM, which is applied to both containers in that image. I have tried to start from scratch, however ensuring our header and footer are properly included seems to cause the issue to reappear.

[Pawan-Gupta · Accepted solution]

so, i think you now know the issue area. some time even broken DOM structure and client side failure cause these weird issues. so check on that and i hope you solve it.