Custom Components inside Container Component are overlapping in Edit Mode

[nika-ch]

We have various custom components inside containers. For instance a container with posts. This is useful for adding items with multiple fields to a list. The issues we have with these components are in the edit mode. The components inside the container are overlapping and can only be selected in the Content Tree, but there the title shown is incorrect. This also means, that once the components were added they cannot be reordered easily.

Example with 3 Post Components inside the Post Container 

When I look at the source in the browser, I can see the editable layer has inline styles to define the position and size of the element. They are identical for all the post components added in the container. Therefore they appear on top of each other and cannot easily be selected or reordered.

<div data-type="Editable" data-path="/content/edelweiss/language-masters/de/home/jobs/vacant-positions/jcr:content/root/container/container/posts_container/post_copy_338728060" role="link" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget is-selected is-active" title="Post component" style="position: absolute; top: 10px; left: 40px; width: 615.2px; height: 992.5px;"><span class="cq-Overlay--component-name">Post component</span><div class="editor-ResponsiveGrid-overlay-resizeHandle editor-ResponsiveGrid-overlay-resizeHandle--left" data-edge="left"></div><div class="editor-ResponsiveGrid-overlay-resizeHandle editor-ResponsiveGrid-overlay-resizeHandle--right" data-edge="right"></div></div>

Is there a way to modify the styles or to make the editable layer visible for each component? What am I missing?

Any helpful input is welcomed. Thanks! 

[Sady_Rifat]

Hello @nika-ch ,

One of the easiest solutions can be to add a component title in the component HTML. Add the following tag on top of each component HTML code.
This will lead to some visible area for the components and authors can see & select each individual component. 

<sly data-sly-test="${wcmmode.edit}">
    <div>${component.title}</div>
</sly>

[nika-ch]

Hello @Sady_Rifat 
Thanks for your input! In this case it does not really help. The title is already visible for all the components and in the content tree the titles are wrong, as it is repeating the title of only the first item for all the components in the container. But thanks anyways!

[aanchal-sikka]

Hello @nika-ch 

Regarding container overlays:

Please make sure your html and sightly element syntax is proper.

I would suggest checking out with other OOTB components, I guess it would work as expected.

Next, start with a normal static HTML, then try to add your HTL piece-by-piece, see where it breaks. Remove any component specific clientlibs for a while

[EstebanBustamante · Accepted solution]

This usually happens when the component embedded has no decoration. Check these 2 things:

1. Your Posts container component has the cq:isContainer property set on its definition

2. If you are including the Post Component via HTL through sly-resource, you must make sure you are adding those in a div, not in a sly element.

[nika-ch]

Hi @EstebanBustamante 

Thanks for your input! This is indeed very helpful and in our case it's the second point you added that needs checking. For all the components that have this issue, we used we used an <li> tag instead of an <div> tag. I will need to change the output for edit mode to use a <div>.